React Newsletter #87

Lessons from migrating a large codebase to React 16, the 'correct' way to structure a React app, and 8 key React component decisions


Articles

Lessons from migrating a large codebase to React 16

Facebook released a rewrite of a large portion of React last week. React 16 has been much anticipated, and the new Fiber rendering pipeline allows for a lot of performance improvements. While the React team has diligently deprecated methods and packages throughout the last version, warning us strongly in console statements to upgrade, the actual final migration is not trivial for larger codebases. Discord just launched their React 16 based app and wanted to share their experience and some tips we learned along the way.

The 100% correct way to structure a React app (or why there’s no such thing)

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code with the least amount of effort.

In this post, David tells you how he structures his React apps, and what drove his decisions. Along the way he'll mention some options he doesn't use because they don’t suit him, but that might serve you well.

8 Key React Component Decisions

React was open sourced in 2013. Since then, it has evolved. As you search the web, you’ll stumble across old posts with dated approaches. So, here are the key decisions you need to make before writing your first React component today.

I’m Breaking up with Higher Order Components

There's a war going on again Higher Order Components, and it's justified. In this post David talks about why he's breaking up with HOCs and instead writing declarative, readable and flexible React components using render props.


Tutorials

A simple way to render React on the server

This tutorial will explain a simple way to server render React components, fetch data, and share component state and props between server and client.


Projects

react-email-editor

React Email Editor is a drag-n-drop email editor component that makes it super easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML.

Downshift

Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components.


Videos

Architecting and scaling a new web app at The NY Times

In under a year, the New York Times scaled NYT Watching from being a brand new React web app to more than a million users per month. Their approach to Redux was a key part of this success, enabling them to manage complex data relationships in an iterative and functional way. In this talk, you'll learn their approach to implementing Redux for their app – what worked, what didn't, and the many tips and tricks that they learned along the way.",


made with ❤️ by ui.dev