Environment
There are two common ways to set up a new React app:
- The CLI utility,
create-react-app
- A JavaScript bundler, like Webpack
Both options leverage npm
, the 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.
JavaScript Bundler
Most React apps are built using a JavaScript bundler. A bundler combines all of your JavaScript source files into a single file, which can then be included in a <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
create-react-app
!
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.