React Newsletter #115

Learning Higher-Order Components in React by Building a Loading Screen, Testing strategies for React and Redux, and migrating to React's new context API


Articles

Learning Higher-Order Components in React by Building a Loading Screen

Higher-order components have a few weird things about them that you can fix easily. This article shows you what those weird things are and how to fix them.

Testing Strategies for React and Redux

When the Firefox Add-ons team ported addons.mozilla.org to a single page app backed by an API, they chose React and Redux for powerful state management, delightful developer tools, and testability. Achieving the testability part isn’t completely obvious though since there are competing tools and techniques. This post covers some testing strategies that are working really well for them.


Tutorials

Migrating to React’s New Context API

Still using the React's old Context API in your app but need to migrate to the new one? This post should help.

React in 160 lines of JavaScript

In this tutorial, Paul is going to show you how to write a fully functional React clone, including Component API and own Virtual DOM implementation. It is divided into four sections — each describing one major topic: elements, rendering, patching, and components.

Setting up apollo-link-state for Multiple Stores

Storing local state in your app doesn't have to be complicated, especially if you're already using Apollo + GraphQL. It this 2 part series Ben Church walks you through how to set up Apollo's new Link State library to help manage local state in medium to large React applications


Projects

css-blocks

CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets. By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.

Introducing Calidation, A React form validation library

Although form validation is boring af, it’s also one of the most important improvements to your user experience. Get ready to be mildly impressed!


Videos

React's All New Context API

React 16.3.0 introduces a brand new Context API. Context makes it easy to pass props down to any child in your tree, even if they are not a direct child. This tutorial is a fun and easy introduction to this all new Context API and how it will make your React applications better.


made with ❤️ by ui.dev