Use an integrated toolchain for the best user and developer experience.
\nThis page describes a few popular React toolchains which help with tasks like:
\nThe toolchains recommended on this page don’t require configuration to get started.
\nIf 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!
\nThe React team primarily recommends these solutions:
\nCreate React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
\nIt sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:
\nnpx create-react-app my-app\ncd my-app\nnpm start\n\nNote
\n\n
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.
\nWhen 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.
\nLearn Next.js from its official guide.
\nGatsby 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.
\nLearn Gatsby from its official guide and a gallery of starter kits.
\nThe following toolchains offer more flexibility and choice. We recommend them to more experienced users:
\nA JavaScript build toolchain typically consists of:
\nIf 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.
\nDon’t forget to ensure your custom toolchain is correctly set up for production.
","frontmatter":{"title":"Create a New React App","next":"cdn-links.html","prev":"add-react-to-a-website.html"},"fields":{"path":"content/docs/create-a-new-react-app.md","slug":"docs/create-a-new-react-app.html"}}},"pageContext":{"slug":"docs/create-a-new-react-app.html"}},"staticQueryHashes":[]}