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.