Create a New React App

Use an integrated toolchain for the best user and developer experience.

This page describes a few popular React toolchains which help with tasks like:

• Scaling to many files and components.
• Using third-party libraries from npm.
• Detecting common mistakes early.
• Live-editing CSS and JS in development.
• Optimizing the output for production.

The toolchains recommended on this page don’t require configuration to get started.

You Might Not Need a Toolchain

If you don’t experience the problems described above or don’t feel comfortable using JavaScript tools yet, consider adding React as a plain <script> tag on an HTML page, optionally with JSX.

This is also the easiest way to integrate React into an existing website. You can always add a larger toolchain if you find it helpful!

Recommended Toolchains

The React team primarily recommends these solutions:

• If you’re building a static or server-rendered application, use Next.js.
• If you’re building a static content-oriented website, use Gatsby.
• If you’re building a single-page app, use Create React App.
• If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.

Next.js

Next.js is a framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box and uses Node.js as the server environment.

Learn Next.js from its official guide.

Gatsby

Gatsby is a framework for creating static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.

Learn Gatsby from its official guide and a gallery of starter kits.

Create React App

Create React App is framework for small, single-page applications in React.

Learn Create React App from its official guide.

More Flexible Toolchains

The following toolchains offer more flexibility and choice. We recommend them to more experienced users:

• Neutrino combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.
• Nx is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, Express, and more.
• Parcel is a fast, zero configuration web application bundler that works with React.
• Razzle is a server-rendering framework that doesn’t require any configuration, but offers more flexibility than Next.js.
• Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Creating a Toolchain from Scratch

A JavaScript build toolchain typically consists of:

• A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
• A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
• A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

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.

Don’t forget to ensure your custom toolchain is correctly set up for production.