React Native’s new architecture is just around the corner..

#​280 — March 16, 2022

Read on the Web

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

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

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:

Last week we mentioned the React 18 release candidate – now there’s a second release candidate.

Flutter is better than React Native, says Jamon Holmgren, but “in all the ways that don’t matter.” Ouch.

📅  React Finland is coming back for a live event this year. It takes place in Helsinki this September.

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

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

Jobs

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.

Feather

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.

Ramp

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.

Hired

▶  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-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.

Leave a Reply

Your email address will not be published. Required fields are marked *