There are two common ways to set up a new React app:
- The CLI utility,
Both options leverage
node.js package manager. We'll cover
npm separately, if you're not familiar with it.
If you'd rather skip environment setup for now, feel free to jump ahead to the React section. This site uses an embedded browser-based React editor so you don't need a local environment to go through the examples.
Create React App
Facebook provides a command-line utility called
create-react-app which automatically sets up a new React project with a sensible default project structure and feature set. This is the best way to start a new project as a beginner.
You may outgrow this option as you get a better grasp of React and want to customize your stack. Fortunately,
create-react-app offers an
eject command to export your app, so you're not locked in.
We'll walk through this in the next section, Quick Start.
<script> tag in an HTML page.
The most widely-used bundler is Webpack. Webpack is extremely configurable thanks to its extensive plugin ecosystem. If you want more control and flexibility than
create-react-app offers, consider learning Webpack.
This is the tool used under-the-hood by
Let's get started!
The following sections will cover the tools you need to build a React app either using
create-react-app or from scratch using Webpack.