React Newsletter #214

React DevTools 4.7.0, five common mistakes writing React components with hooks, and how to deploy a React app on AWS

News

React DevTools 4.7.0

This new release includes significant improvements to the Profiler, improved inline search results, and more. Rendered by list also now highlights native elements on hover.

Articles

🧠 A visual guide to React mental models, part 2

This article is part 2 of Obed Parlapiano's visual guide to React mental models. Like part 1, this post also features a lot of helpful visuals so you can "see" the mental models at work for useState, useEffect, and lifecycles.

Five common mistakes writing React components with hooks

This article from Lorenz Weib goes over some common mistakes he finds when writing react components, why they are mistakes, and how to avoid or fix them. It's fairly opinionated, but Lorenz provides his reasoning behind each recommendation.

Building with React for all platforms: 5 helpful frameworks and tools

This article walks through 5 recommended frameworks and tools for building static sites, mobile apps, desktop apps, and server-side rendering frameworks.

Tutorials

Painlessly Build and Deploy Next.js Apps With Nx

Nx is a set of Extensible Dev Tools for Monorepos. Meanwhile, Next.js is a super cool meta-framework that is built on top of React. In this post, learn how to easily build Next.js Apps with Nx.

How to deploy a React app on AWS using the AWS CDK

Here's an overview of what you'll build in this post -

Hosted on AWS S3
Distributed around the world with AWS CloudFront’s CDN,
Have a domain name through AWS Route 53
Have HTTPS enabled through certificates provided by AWS Certificate Manager
Built fully with Infrastructure as code through the use of AWS CDK where we will build the infrastructure with TypeScript
Deployed continuously with Buddy. Both the React client app and Infrastructure will have their own CI/CD pipelines

How to add search to a React app with Fuse.js

It's often challenging to figure out the rules and logic to add client-side search capabilities to your React app. This tutorial walks through a simple example of how you can use Fuse.js to more easily add search to your apps.

Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today.