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
<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!
The React team primarily recommends these solutions:
- If you’re learning React or creating a new single-page app, use Create React App.
- If you’re building a server-rendered website with Node.js, try Next.js.
- If you’re building a static content-oriented website, try Gatsby.
- If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.
Create React App
npx create-react-app my-app
npxon the first line is not a typo — it’s a package runner tool that comes with npm 5.2+.
Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.
When you’re ready to deploy to production, running
npm run build will create an optimized build of your app in the
build folder. You can learn more about Create React App from its README and the User Guide.
Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box, and assumes that you’re using Node.js as the server environment.
Learn Next.js from its official guide.
Gatsby is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
More Flexible Toolchains
The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
Razzle is a server-rendering framework that doesn’t require any configuration, but offers more flexibility than Next.js.
Creating a Toolchain from Scratch
Don’t forget to ensure your custom toolchain is correctly set up for production.