Starting a React app in 2023

Foreword

This article focuses on React, a JavaScript (and by extension TypeScript) library for building web and native user interfaces based on (reusable) components. Whether you're new to JavaScript or a seasoned veteran, React is a great library to get started - it's the most popular and has the largest ecosystem of packages, tutorials and other teaching content to help you on your journey.

However, choosing the right tools to build your React project can be challenging. Create React App, a popular tool for creating new React projects, has been the de facto recommendation since its' inception in 2016. Unfortunately, over time, the project has accumulated significant technical debt and is no longer being actively maintained. The latest release as of writing dates back to April 2022.

With the release of the new React docs introduced in a blog post in March of this year, it's an exciting yet confusing time for the React ecosystem. The docs no longer recommend Create React App, and instead recommend a slew of production-grade React frameworks. This article attempts to walk you through the different types of apps you can build with React, and which tool I think is best for the job. If you have any concerns about the content or recommendations made in this post, please leave a comment below!

Building a Single-Page App

If you're setting out to build a fully client-side rendered app, meaning you want your app to run only on your users' devices (avoiding coupling a server with the operation of your app), then you are building what's called a Single Page Application (SPA). The current best tool for this job is Vite, which offers fast refreshes during development and will optimize your builds for production. However, it's important to keep a few of the pitfalls of this approach in mind:

1. You are sending a lot of JavaScript to your users, which will result in long loading times on slow networks and poor performance on low-end devices.
2. You need to manage the state locally, whether that be persisting it in storage on the user's device, or uploading it to a server each time the state changes. Otherwise, your client and server will be out-of-sync with each other (especially after a reload of the app).
3. Link previews on social media platforms and metadata in search engines will not work or be severely compromised, since most crawlers (code that fetches this information from your website) don't execute JavaScript.

Building a Multi-Page App

If you want to solve the problem of sending lots of JavaScript to the client, and most of your content is static (doesn't change), then you are building a Multi-Page Application (MPA). The main differentiator of this approach is that navigating between pages or routes triggers a reload / download of the next page, unlike a SPA where once you load the app all further page loads are seamless. This also means you are only downloading the code necessary to run the specific page the user is on, instead of all the code required to run your app. The current best tool for this job is Astro, which runs (most of) the JavaScript on your server and ships static HTML to the user. The main benefit of Astro is its' "Islands" architecture, which allows you to load interactive components (and their respective JavaScript) on the client, on a per-component basis. This approach solves most of the issues with SPAs but still involves a page refresh between navigations (for now). It's also not the best tool for highly dynamic websites where the content changes frequently, as this will involve constant rebuilds of the static pages, and there is no way to programmatically rerender a static page when its content changes.

Building a Progressively Enhanced Single Page App

If you are building a dynamic web app with lots of changing content, and where you need to choose between static (built once), server (built on-demand on each request), and incremental (static builds that can be programatically rebuilt) rendering, then you are building a Progressively Enhanced Single Page App. The best tool for this job hands down is Next.js, since it includes all the benefits of an MPA while making page navigations seamless (no reloads), and gives you the most flexibility in terms of ways to render your app. Next.js includes several other features that simplify development, such as an integrated image optimization package in next/image, a package to load fonts in next/font, and the ability to run on the Edge.

Another benefit of choosing Next.js is that it is the first framework to start supporting React Server Components with their beta Next.js 13 App Router. Investing in Next.js now will let you incrementally adopt these new features as you see fit for your project when they mature.

Building a Native Mobile App

If you want to build a mobile app with React for Android and iOS, while being able to reuse the same codebase for your web app, Expo is the best tool for the job. Built on top of React Native, it offers lots of packages and integrations that significantly simplify and expedite mobile development.

Conclusion

In this article, we have explored the different types of apps that can be built with React and suggested the best tools for the job. Ultimately, choosing the right tool depends on your project's specific needs and goals, so it's important to carefully consider all the different options mentioned here and do some additional research to gain other perspectives.

If you are uncertain about the different types of web apps mentioned in this article, please check out this awesome post by Kent C. Dodds.

Thanks for reading!