--- title: "How to start a React project in 2024" publication: "React Status" issue: 371 published_at: "2024-01-24" canonical_url: "https://react.statuscode.com/issues/371" --- Plus React Conf is back, and a tale of upgrading to React 18. | #​371 — January 24, 2024 [Read on the Web](https://react.statuscode.com/issues/371) Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://clerk.com/docs/quickstarts/overview?utm_source=sponsorship&utm_medium=newsletter&utm_campaign=reactstatus&utm_content=01-24-2024) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/p7x29ebyfuuo0ptljnd4.jpg)](https://www.sonarsource.com/blog/upgrading-react-18-sonarqube/) [Lessons Learned Upgrading to React 18](https://www.sonarsource.com/blog/upgrading-react-18-sonarqube/) — 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. Phil Nash (SonarSource) [How to Start a React Project in 2024](https://www.robinwieruch.de/react-starter/) — 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. Robin Wieruch [![\](https://copm.s3.amazonaws.com/3cce0cb7.png)](https://clerk.com/docs/quickstarts/overview?utm_source=sponsorship&utm_medium=newsletter&utm_campaign=reactstatus&utm_content=01-24-2024) [Clerk Is the Easiest Way to Set Up Auth for Your React App](https://clerk.com/docs/quickstarts/overview?utm_source=sponsorship&utm_medium=newsletter&utm_campaign=reactstatus&utm_content=01-24-2024) — 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. Clerk sponsor 📅 [React Conf 2024: May 15-16 in Lake Las Vegas](https://conf.react.dev/) — 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 of venue, IMO.)_ Meta [Build a Next.js App in Storybook with React Server Components and Mock Service Worker](https://storybook.js.org/blog/build-a-nextjs-app-with-rsc-msw-storybook/) — How to develop, document, and test RSC apps in isolation, while using MSW to mock network requests. Michael Shilman [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/khpcixsthwfm3buwqwhk.jpg)](https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers-and-react) [A Comprehensive Guide to React and OpenLayers Integration](https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers-and-react) — How to add and work with interactive maps in your React app by integrating with the established [OpenLayers](https://openlayers.org/) JavaScript mapping library. Max Dietrich ▶[Gateway to React: The React.dev Story](https://www.youtube.com/watch?v=LfVT2nNsaJ8) — One of the main participants in the reengineering of React's docs — now available at [React.dev](https://react.dev) — provides an informative and entertaining backstory to the project. Rachel Nabors (Tech Talks YLD) ▶[How React Server Components Change Everything](https://www.youtube.com/watch?v=rGPpQdbDbwo) — _“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.”_ Kyle Cook [Prop Drilling and Component Composition](https://alexsidorenko.com/blog/react-prop-drilling-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. Alex Sidorenko [Updating Public Next.js Environment Variables Without Rebuilds](https://phase.dev/blog/nextjs-public-runtime-variables/) — A practical approach to updating public environment variables without rebuilding your app. Rohan Chaturvedi [Communicating with React Native Web Views](https://making.close.com/posts/react-native-webviews) Trey Cucco (Close) 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/vno7umq3qorveezmvjlg.jpg)](https://resend.com/blog/react-email-2) [React Email 2.0: Build Better Emails with React](https://resend.com/blog/react-email-2) — [React Email](https://react.email/) is a collection of unstyled components for creating emails using JSX and React ([this example](https://demo.react.email/preview/nike-receipt.tsx?view=desktop) 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. Gabriel Miranda (Resend) [react-use: A Large Collection of Useful Hooks](https://github.com/streamich/react-use) — A bumper packed collection, covering things from tracking battery state and geolocation to setting favicons, debouncing, and playing videos. Va Da and Contributors [rc-table: A Useful React Table Component](https://table-react-component.vercel.app/) — A straightforward, lightweight table component for modest data presentation use cases ([demo](https://table-react-component.vercel.app/demo/animation)). [GitHub repo](https://github.com/react-component/table). Dumi - [Next.js 14.1](https://nextjs.org/blog/next-14-1) - [Expo Router v3](https://expo.dev/changelog/2024/01-23-router-3) - [React Snap Carousel 0.4](https://github.com/richardscarrott/react-snap-carousel) – DOM-first, headless carousel. - [visx 3.7](https://airbnb.io/visx/) – Airbnb's D3 + React visualization components. - [Zustand 4.5](https://github.com/pmndrs/zustand) – Barebones flux-y state management. - [react-native-bootsplash 5.3](https://github.com/zoontek/react-native-bootsplash) – Show a splash screen during startup. - [Typist 3.0](https://typist.doist.dev/?path=/docs/readme--docs) – Rich-text editor component. - [react-shepherd 4.3](https://github.com/shepherd-pro/react-shepherd) – Give users page tours. Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom