React Newsletter #144

Better reusable React components with the overrides pattern, how to animate page transitions in React using styled components, and recursive paths with React Router


News

React closes out dominant 2018 - Hacker News Hiring Trends

The story of 2018, much like 2017, remains to be React as it becomes the first technology to remain on top for an entire calendar year. React also runs its win streak to an incredible nineteen months in a row.


Articles

Better Reusable React Components with the Overrides Pattern

Even with great techniques like render props and state containers, the customizability of some reusable components can be limiting. This article explores a new design pattern that allows developers to more effectively override a component's styles and behavior.

How to animate page transitions in React using styled components

While building the next version of RoutePlanGo, Veera needed a way to animate the page transition when the user navigates to different URLs in the app. Where he works they use React , Styled Components, and React Router for URL handling. This post is his journey in adding page transitions to their app.


Tutorials

Recursive paths with React Router

Because React Router is just components, you can do crazy things like having recursive routes. In this post you’ll learn how they work by breaking down the ‘Recursive Paths’ example on the React Router docs.

Improve React Performance using Lazy Loading

Lazy loading has come to be one of the optimization techniques widely used now to speed up the load time. The prospect of Lazy Loading helps reduce the risk of some of the web app performance problems to a minimal. In this article, you'll look into how to use lazy loading to optimize load time in your React apps.

Pass props to React Router's Link component

Often times when building an app with React Router you’ll need to pass props through a Link component to the new route. In this post, you’ll break down how that process works.


Projects

Next.js MDX Blog Kit"

This kit is designed to give you a fully functional, easy to use (if you are a developer) blog with perfect Lighthouse scores.

rescripts

Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, and Webpack.


made with ❤️ by ui.dev