React Newsletter #214

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.

---

Projects

🌠 react-shimmer: async loading, performant image component for React

A powerful, customizable, Suspense-like component that (optionally) simulates a shimmer effect while loading, with zero dependencies.

react-native-scroll-bottom-sheet

A cross-platform scrollable bottom sheet with virtualization support and fully native animations, that integrates with all core scrollable components from React Native: FlatList, ScrollView and SectionList. Also, it’s 100% compatible with Expo.

TuneMeet: Chat with people listening to the same song

Log in with Spotify and TuneMeet will match you with someone listening to the same song as you and give you a space to chat about it. Does that sound like the beginning to the perfect 2020s rom-com, an episode of Black Mirror, or both? You decide! 🙃

Rumbbble

A Dribbble clone for developers to visually showcase their projects and comment, upvote, and view code on other’s projects

---