Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.

Subscribe with Email

Email

No spam, ever. We'll never share your email address and you can opt out at any time.

React 16 is official, a video tutorial on GraphQL & a library from the New York Times development team

This week was full of exciting news from the React core team! I'm sure most of you have heard, but React 16 was officially released this week and there was quite a lot of buzz and articles surrounding the official release. This week's newsletter has a few of those articles and news announcements.

Also announced this week was that React 16 is now under the MIT license. The broader tech community had a lot of concerns about the BSD+Patents license that the previous version of React was under and so the React team decided to move away from that license.

We've also included a React library created by the dev team at the New York Times and an extremely in-depth article (a 14 minute read on Medium!) on migrating to a progressive web app built with React and the improvements seen as a result of that migration.

React 16 is officially released! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size. Check out the blog post explaining more about these features.

Videos

This video is the first of a series by Peggy Rayzis where she gives you tips to help supercharge your GraphQL development. This week's topic is the newly released Apollo 2.0 client. Check it out! It's only 5 minutes long!

Tutorials

There are lots of exciting new bits (most notably the Fiber rewrite), but in this article Sasha Aicken (former CTO of Redfin), explains many of the improvements that have been made to server-side rendering.

With today's release of React 16, the React core team has completely rewritten the internals of React while keeping the public API essentially unchanged. From an engineering standpoint, it's a bit like swapping out the engine of a running car: since hundreds of other companies (including Facebook) use React in production every day, the team wanted to do the swap without forcing people to rewrite their components built in React. In this article, Sophie Alpert on the React core team discusses all that was required for this extensive rewrite.

Treebo is India’s top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.

What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. and loaded in under 4 seconds over 3G.

This in-depth article dives into the technical journey that made all of these improvements possible.

Code

React Headroom is a React Component to hide/show your header on scroll. When you scroll down, it slides out of view and slides back in when scrolling up. Fixed headers are nice for persistent navigation but they can also get in the way by taking up valuable vertical screen space. Using this component lets you have your persistent navigation while preserving screen space when the navigation is not needed.

The core product teams of The New York Times are investing heavily in React.js and they are building out a completely new web platform for all of their products.

Traditionally, the tracking and analytics concerns of the New York Times app were “bolted on” after the fact. This was not only brittle, but it was very difficult to do without exposing non-semantic data necessary for the analytic modules to see and attach.

The New York Times team wanted to move away from the DOM as the source of truth and instead use the components themselves to signal interactions of interest. Enter: the React Tracking library where the components are the source of truth for analytics.

See the article that goes more in depth on the reasons behind the creation of the library.

About

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.