~reactstatus | Issue 371 - How to start a React project in 2024 (13)

Lessons Learned Upgrading to React 18 — If you get the feeling everyone upgrades to using the newest React version and features ASAP, it’s not true. Most teams take a while to do big upgrades (if they even do so at all) so it’s interesting to see the SonarQube team’s story and some issues they ran into.

How to Start a React Project in 2024 — There are, of course, many ways, but this well-regarded author explains the pros and cons of a few approaches, including using Vite, Astro, or Next.js.

Clerk Is the Easiest Way to Set Up Auth for Your React App — Get drop-in authentication for your React app using Clerk. Their quickstart guide streamlines integration with ready-to-use components, hooks, and helpers, ensuring a smooth authentication and user management experience that just works.

📅 React Conf 2024: May 15-16 in Lake Las Vegas — Meta and Callstack are hosting a two-day React-dedicated event that’ll be both in person and live streamed for free. You can only sign up for notifications so far, but you can pencil in the date nonetheless. (They say it’s in ‘Henderson’ but Lake Las Vegas is a whole other ball game. An odd choice...

Build a Next.js App in Storybook with React Server Components and Mock Service Worker — How to develop, document, and test RSC apps in isolation, while using MSW to mock network requests.

A Comprehensive Guide to React and OpenLayers Integration — How to add and work with interactive maps in your React app by integrating with the established OpenLayers JavaScript mapping library.

▶  Gateway to React: The React.dev Story — One of the main participants in the reengineering of React's docs — now available at React.dev — provides an informative and entertaining backstory to the project.

▶  How React Server Components Change Everything — “Server components completely alter how you write React code and in this video I will talk about all the difference between client and server components, what the pros and cons are, as well as when to use each one.”

Prop Drilling and Component Composition — A visual demonstration of how a little restructuring can help you avoid prop drilling (or at least tidy it up). This is from 2023, but we overlooked it at the time.

Updating Public Next.js Environment Variables Without Rebuilds — A practical approach to updating public environment variables without rebuilding your app.

React Email 2.0: Build Better Emails with React — React Email is a collection of unstyled components for creating emails using JSX and React (this example shows you the basic idea). v2 extends the tooling side of things somewhat and introduces two new components focused on displaying source code in emails.

react-use: A Large Collection of Useful Hooks — A bumper packed collection, covering things from tracking battery state and geolocation to setting favicons, debouncing, and playing videos.

rc-table: A Useful React Table Component — A straightforward, lightweight table component for modest data presentation use cases (demo). GitHub repo.