Creating a React App
React can be used to build apps and websites in a variety of ways. Here’s our recommendations for how to create a new React app.
Ways to Use React
React is flexible. You can use it to build full-stack apps with integrated client and server functionality, in standalone client apps that work with any backend or just a browser, or even add React to an existing page generated by a server.
We’ve found that most React apps have similar needs for data fetching and routing, and benefit from performance patterns like code splitting. Because of this, we primarily recommend using a React-based framework as the best way to build a React app. These frameworks provide good defaults, integrate these features, and provide room to grow your app over time. (Similarly, other UI libraries also recommend integrated frameworks - Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart.)
If you want a simpler setup or are learning, you can start from scratch with a basic project, and we have suggestions for common tools that will help get your app going the right way.
To learn more about the different ways to use React, see the overview of web app architectures
Deep Dive
Deploying a React app depends on what tools you use to build the app and what kind of app you’re building.
If you’ve built a client-side Single Page Application or a static content site, you just need a place to upload and host the JS, HTML, and CSS files for your site, and it can fetch data from any server or API as needed. Single-page apps can be deployed to a CDN or static hosting service, and do not need to run an app server. This also means that Single-Page Apps do not need Node to run, and can work with backends written in any language.
If your app uses Server-Side Rendering to generate pages, you’ll need to deploy the application somewhere that can host your app server. SSR apps do need Node or another JS runtime to run React on the server.
Note that all of the full-stack frameworks on this page can also create standalone single-page apps that don’t need an app server! If you would like to enable features that require a server (like Server-Side Rendering), you can later opt-in on individual routes without rewriting your app, and just change how you deploy it.
Recommended React frameworks
These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
Next.js (App Router)
Next.js’s App Router is a React framework that takes full advantage of React’s architecture to enable full-stack React apps. You can deploy a Next.js app to any Node.js or serverless hosting, or to your own server. Next.js also supports static export which doesn’t require a server.
To create a new Next.js project, run:
Next.js is maintained by Vercel. Vercel additionally provides opt-in paid cloud services.
React Router (v7)
React Router is the most popular routing library for React. It can be paired with Vite to create a full-stack React framework. It emphasizes standard Web APIs and has several ready to deploy templates for various JavaScript runtimes and platforms.
To create a new React Router framework project, run:
React Router is maintained by Shopify.
Expo (for native apps)
Expo is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for React Native that makes the native parts easier to use.
To create a new Expo project, run:
If you’re new to Expo, check out the Expo tutorial.
Expo is maintained by Expo (the company). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
Other Frameworks
There are other up-and-coming frameworks that are working towards our full stack React vision:
- TanStack Start (Beta): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
- RedwoodJS: Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
Start From Scratch
If you are learning React, are not using JS in your backend, only need client-side functionality, or want to design your app configuration yourself, there are other options available for starting a React project from scratch.
Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The frameworks we recommend have built-in solutions for these problems. If you want to choose your own solutions, we have some recommendations for commonly-used tools.
Install a Build Tool
The first step is to install a build tool like vite, parcel, or rsbuild. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server.
Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite’s React plugin or React SWC plugin and React SSR example project to get started.
Vite is already being used as a build tool in one of our recommended frameworks: React Router.
Parcel
Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See Parcel’s React recipe to get started.
Rsbuild
Rsbuild is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See Rsbuild’s React guide to get started.
Common Application Patterns
The build tools listed above start off with a client-only, single-page app (SPA), but don’t include any further solutions for common functionality like routing, data fetching, or styling.
The React ecosystem includes many tools for these problems. We’ve listed a few that are widely used as a starting point, but feel free to choose other tools if those work better for you.
Routing
Routing determines what content or pages to display when a user visits a particular URL. You need to set up a router to map URLs to different parts of your app. You’ll also need to handle nested routes, route parameters, and query parameters. Routers can be configured within your code, or defined based on your component folder and file structures.
Routers are a core part of modern applications, and are usually integrated with data fetching (including prefetching data for a whole page for faster loading), code splitting (to minimize client bundle sizes), and page rendering approaches (to decide how each page gets generated).
We suggest using:
Data Fetching
Fetching data from a server or other data source is a key part of most applications. Doing this properly requires handling loading states, error states, and caching the fetched data, which can be complex.
Purpose-built data fetching libraries do the hard work of fetching and caching the data for you, letting you focus on what data your app needs and how to display it. These libraries are typically used directly in your components, but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering as well.
Note that fetching data directly in components can lead to slower loading times due to network request waterfalls, so we recommend prefetching data in router loaders or on the server as much as possible! This allows a page’s data to be fetched all at once as the page is being displayed.
If you’re fetching data from most backends or REST-style APIs, we suggest using:
If you’re fetching data from a GraphQL API, we suggest using:
Improving Application Performance
The build tools listed above default to building single page apps (SPAs). SPAs can be simpler to start with, but can also lead to slower overall app performance due to loading large amounts of JS.
To improve app performance, you can use additional rendering patterns like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). You can also implement code splitting to break your app into smaller bundles that can be loaded on demand and improve loading times.
If you start from scratch, these patterns will require more work to implement yourself and can be harder to get right, and adopting them may require a more significant migration effort (which is why we recommend using frameworks as the default approach ).
See Web App Architectures to learn more about possible rendering strategies and other performance improvements, and how to apply these techniques without a framework.
If you’re a framework author interested in being included on this page, please let us know.