#​350 — August 2, 2023

Read on the Web
Together with  Frontend Masters logo
React Status

Understanding React Server Components — If you’ve struggled to get your head around the ideas involved with React Server Components, and Dan Abramov’s ‘let’s recreate RSCs from scratch’ went a little too deep, this is a good, high-level explanation of the fundamentals that explains what problems they solve, why you might use them, and how Next.js makes them easier to work with.

Alice Moore (Vercel)

Lydia Hallie Tests your Web Development Knowledge — Answer 30 questions on a wide range of front-end development concepts (such as JavaScript, CSS, web security, HTTP protocols, and more) and dive deeper into the answers to help give you a more extensive understanding of all things web dev.

Frontend Masters sponsor

Everything Mux Learnt Migrating 50K LOC to Server Components — If you prefer real-world experiences to technical explanations and overviews, this is for you. A member of the Mux team goes into their story of adopting React Server Components and preemptively answers some of the questions we all have. “By the end of all this, you should have a pretty good idea of whether you should use React Server Components and how to use them effectively.”

Darius Cepulis (Mux)

To wrap up the focus on RSCs this week, Marco Salazar and Pete Hunt have also written about how Dagster has sped up their documentation site 'by 20x' using RSCs.

OK. No more server components in this issue now – promise.

IN BRIEF:

  • Surma, who now works over at Shopify, explains how Shopify is going all-in on Remix and React for its Admin Apps (apps that third parties can build for Shopify store owners to add to their stores).

  • The team behind the popular Storybook UI component workshop have checked in with a look at Storybook 7.1 and 7.2, noting that 7.2 is the first in an anticipated line of 'smaller but more frequent' releases.

  • Last week we featured Vercel's react-tweet library and pondered if it might need to be renamed given Twitter's recent rebranding. Enter react-xeet.. yes, it's a parody 😆

▶  How to Build a Drag-and-Drop Kanban Board — A complete screencast walkthrough of using React to build a Trello-like app based around the familiar Kanban board pattern. It also serves as an introduction to the dnd-kit drag-and-drop toolkit.

Kliton Bare

Using Supabase Storage for React Native App File Uploads — Learn how to implement authentication and file upload in a React Native app.

Simon Grimm (Supabase)

▶  Creating a 'Brain Animation' with React Three Fiber — React Three Fiber provides a way to use Three.js from React in order to create 3D graphics.

Yuri Artiukh

RxDB - Local Database for JavaScript Applications — With RxDB you can build realtime applications with great performance that even works when your users are offline.

RxDB sponsor

Uploading Files from a Form with Drag and Drop
Colby Fayock

How to Send Emails with React Using Resend
Rayan Kazi

If you prefer a video, Kavin Valli has a ▶️ screencast of using React with Resend.

Achieving Clean and Maintainable React Component Tests
Tato Patrón

🛠 Code and Tools

Vite React Boilerplate: A Production Ready Starter Template — A new ‘batteries included’ Vite + React app template that leans upon, well, a lot of batteries from Zustand to Zod to Storybook.

Ricardo Valdovinos

React Sweet State: 'The Good Parts' of Redux + React Context — A state management solution heavily inspired by Redux mixed with contexts from the Context API. If you’ve previously given it a go, check it out again as the latest release makes containers far more flexible than before.

Atlassian

Solito 4: A Way to Use React Native with Next.js — A wrapper around React Navigation and Next.js that lets you share navigation code across platforms. v4.0 introduces support for using React Native with the Next.js App Router.

Fernando Rojo

📰 Classifieds

Senior Software Engineer (Frontend Lead) — Come lead Emerge's web platform, used by teams like DoorDash, Square, Dropbox & Airbnb (our stack: Next.js, React, TS, Vercel).

💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Classifieds is a way to share projects, services, events, or jobs you may find useful, replacing our job listings section.

React Image Gallery 1.3: Image Carousel Component — GitHub repo.

Xiao Lin

Rows n' Columns: A Commercial Spreadsheet Component — It’s not open source. It’s not cheap. But it does seem to have a lot of features and the demo is smooth.

Rows n' Columns