React 18. It’s here.

🇺🇦 #​282 — March 30, 2022

Read on the Web

React Status

React 18.0 Released — Almost a year ago, the plan was for 18 to be simple to upgrade to with minimal changes needed – and despite the introduction of a new concurrent rendered, Suspense, new hooks, automatic batching, and more (all covered in this news post) they’ve pretty much nailed it. This React 18 upgrade guide covers the few things you need to consider, and if you’re a true completist, this changelog covers every tiny change.

The React Team

How to Build a Fullstack App from Scratch — Join Scott Moss for this detailed course looking at modern app building. Get to grips with a stack of tools, including the likes of Next.js, TypeScript, Postgres, and React, plus you’ll learn about data modeling, authentication, state management, testing and more.

Frontend Masters sponsor

When Does React Render Your Component? — If you’re still a little flummoxed by React rendering behaviour, this takes another crack at explaining it by walking the fine line between superficial overview and technical deep dive.

Zhenghao He

▶  The Story of Next.js — A good balance of detail and high level overview to tell the Next.js story. Despite being just 12 minutes long, it goes into a lot more background and history than you’d expect, too.

Tyler McGinnis

Remix: The Yang to React’s Yin? — Kent C. Dodds continues to flesh out Remix’s raison d’etre with another insightful blog post: this time talking about React’s UI building yin as compared to Remix’s ‘Network Chasm’ yang, which he broadly defines as everything between the client and the server.

Kent C. Dodds

How to Use Props in React — We first linked to this three years ago but Robin has been updating his posts to modern standards, so it remains a fantastic resource now too and is packed with prop-oriented examples.

Robin Wieruch

Quick bits:

📅 React Norway is a React event taking place in the curiously-named Farris Bad hotel in beautiful Larvik, Norway. You can attend virtually online too for a nominal sum, but who doesn’t want to meet Colby Fayock in person?

Jobs

Ashby (YCW19) Hiring Frontend Engineers to Work on Design System — Join a remote-first team improving productivity with powerful software. <2h meetings/wk. Ship >8x per day. CI/CD takes <10min 🚀

Ashby

Senior Web Developer (Node/ReactJS) – Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

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

🛠 Code and Tools

react-custom-roulette: A Roulette Wheel, Complete with Spinning — We don’t want to condone gambling or anything, but the ‘spinning wheel’ is a compelling effect in lots of situations, and this brings a highly customizable wheel to the table in the form of a React component.

Effectus Software

Refine 3.x: A React Framework for Building Internal Tools — Shipping with the Ant Design System, the point of Refine is to provide lots of out-of-the-box functionality for rapid development of things like admin panels, B2B apps and dashboards.

Pankod

▶  Build a Monitoring Application in Less Than 10 Minutes

InfluxData sponsor

Radish: A React-Based Static Site Generator That Outputs Plain HTML and CSS — Uses React components, doesn’t output any client-side JS, includes support for Markdown, data in TOML/YAML/JSON, and is offline-first. We love the logo too.

Jake Lazaroff

Electrode Native: Integrate React Native into Existing Native Codebases — Create React Native based components (they’re called MiniApps in this case) which are then published and reused in potentially any mobile application.

Electrode

⚡️ Quick Bits:

phosphor-react — Who doesn’t need yet another icon library for some future project?

react-photo-view — A well-executed React photo image preview component featuring touch gestures.

react-rewardsMicrointeractions can be a highly effective means of increasing user engagement—this library will get you started.

react-flex-ready — A Flexbox grid.

😎 A neat RSS reader project

Quite often, readers will write in to us (you can do this by hitting reply to any issue) to ask if we’ll link to their latest React-powered project. We often grant this request but sometimes a project seems merely created with React, but isn’t open source or particularly relevant in terms of a React newsletter. This week we have a nice exception!

Reams, by Adam Butler, is a React Native-powered RSS reader (remember those?) that uses AI-driven layouts to present stories in an immersive but individual style, and while it is available as an app, it’s open source too so you can learn from the code if you want.

Leave a Reply

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