Start a New React Project

Choose your own adventure

React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn’t take care of routing or data management. This means there are several ways to start a new React project:

• Start with an HTML file and a script tag. This doesn’t require Node.js setup but offers limited features.
• Start with a minimal toolchain, adding more features to your project as you go. (Great for learning!)
• Start with an opinionated framework that has common features like data fetching and routing built-in.

Getting started with a minimal toolchain

If you’re learning React, we recommend Create React App. It is the most popular way to try out React and build a new single-page, client-side application. It’s made for React but isn’t opinionated about routing or data fetching.

First, install Node.js. Then open your terminal and run this line to create a project:

Now you can run your app with:

For more information, check out the official guide.

Create React App doesn’t handle backend logic or databases. You can use it with any backend. When you build a project, you’ll get a folder with static HTML, CSS and JS. Because Create React App can’t take advantage of the server, it doesn’t provide the best performance. If you’re looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.

Popular alternatives

• Vite
• Parcel

Building with a full-featured framework

If you’re looking to start a production-ready project, Next.js is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.

The Next.js Foundations tutorial is a great introduction to building with React and Next.js.

Popular alternatives

• Gatsby
• Remix
• Razzle

Custom toolchains

You may prefer to create and configure your own toolchain. A toolchain typically consists of:

• A package manager lets you install, update, and manage third-party packages. Popular package managers: npm (built into Node.js), Yarn, pnpm.
• A compiler lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: Babel, TypeScript, swc.
• A bundler lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: webpack, Parcel, esbuild, swc.
• A minifier makes your code more compact so that it loads faster. Popular minifiers: Terser, swc.
• A server handles server requests so that you can render components to HTML. Popular servers: Express.
• A linter checks your code for common mistakes. Popular linters: ESLint.
• A test runner lets you run tests against your code. Popular test runners: Jest.

If you prefer to set up your own JavaScript toolchain from scratch, check out this guide that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like Nx or Turborepo.