#​280 — March 16, 2022

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

A Delightful React File/Directory Structure — We have featured a number of these types of articles, but there’s always room for another perspective on the ‘right’ way to set up a project, particularly from a respected voice in the React community.

Josh W. Comeau

An Update on React Native's New Architecture Rollout — Updates to how React Native works under the hood have been coming for a fair while now with FB first using them in-house last summer. This year, it’s coming to us all and this post covers details of the rollout and how you can get involved.

Nicola Corti (Meta)

🧈 ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is your content backend. Enable your marketing team to update website + app content without needing you. Try the #1 rated Headless CMS for React today. Free for 30 days.

🧈 ButterCMS sponsor

Quick bits:

How to Set Up a Professional React Project — Every journey starts with a single step, but when it comes to building an entire app, that first step can sometimes seem particularly intimidating when lots of tooling is involved. This guide explains how to create a new React app using a popular stack: Next.js, TypeScript, ESLint, Prettier, styled-components, Cypress, and Storybook. There’s an associated 48-minute screencast going through it all too.

Johannes Kettmann

A Fundamental Guide to React Suspense — After several years since it was first proposed, Suspense will finally be officially released with React 18. But what is it, why do we need it, what issues does it address, and what are the benefits?

Chak Shun Yu


Fullstack Engineer (Remote, EU Timezones) — We’ve built a product thousands of people love (See Trustpilot if you don’t believe us). We need your help with Node & TypeScript.

Senior Frontend Engineer (TypeScript) — Remote / NYC — We're the leading spend management platform for businesses. Small cross-functional front-end operations using React and TypeScript.

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

▶  How Remix Helps Bridge the Network Chasm — Kent C. Dodds—the Director of Developer Experience at Remix—and the JS Party panelists take a look at the new React framework: what it does today, how it lured Kent away from a lucrative independent teaching career and what’s next.

The JS Party Podcast podcast

▶  Webcam Photo Filters and Effects in React with Cloudinary — A walkthrough of both the creation of a modest, React-based webcam app and the subsequent use of the Cloudinary media-as-a-service platform to add filters and overlays to the captured images.

Colby Fayock

How to Make a Data Dashboard with React Native

InfluxData sponsor

Building a YouTube Component Using React Native's Webview
Daniel Friyia

🛠 Code and Tools

React-Menu 3.0: A Customisable and Accessible React Menu Library — A well designed menu component that supports an unlimited depth of submenus, radio/checkbox menu items, as well as React 18’s concurrent rendering. Works nicely with the keyboard too. GitHub repo.

Zheng Song

Solito: Unifying React Native with Next.js Around Navigation — A wrapper around React Navigation and Next.js that lets you share navigation code across platforms. It also provides a set of examples to illustrate its use. It promises to be “the missing piece for using React Native with Next.js to build powerful cross-platform apps.”

Fernando Rojo

⚡️ Quick Bits:

react-jsonschema-form — Component for building forms from JSON Schema.

react-string-replace — An easy way to safely do string replacement with React components.

react-json-reconciler — Serialize JSX trees into JSON objects.

react-native-modalfy — Easy management of modals in React Native apps.

datetimepicker — A React Native date & time picker component for iOS, Android and Windows.