React for Data Visualization
Student Login

Set up a local environment with create-react-app

In the summer of 2016, the React team released a tool called create-react-app. It creates a React app so that you can get started right away. All of the code in this course runs with an app set up like this.

Getting started with React has never been easier.

  1. Make sure you have node.js
  2. Install the app generator
  3. Run the app generator

Make sure you have node.js

Modern JavaScript development runs on node.js. Your code still ends up in a browser, but there are a few steps it has to go through before it gets there. Those toolchains run on node.js.

Go to, download one of the latest versions, and run the installer. You can pick the more stable LTS (long-term-support) version, or the more gimme-all-the-features version. JavaScript toolchains run fine in both.

Server-side rendering might be easier with the fancy-pants version. More on that later.

Install create-react-app

Great, you have node and you're ready to go.

Run this command in a terminal:

$ npm install -g create-react-app

This installs a global npm package called create-react-app. Its job is to create a directory and install react-scripts.

Confusing, I know.

You can think of create-react-app and react-scripts as two parts of the same construction. The first is a lightweight script that you can install globally and never update; the second is where the work happens. You want this one to be fresh every time you start a new app.

Keeping a global dependency up to date would suck, especially considering there have been six major updates since Facebook first launched create-react-app in July 2016.

Run create-react-app

Superb! You have create-react-app. Time to create an app and get started with some coding.

Run this in a terminal:

$ create-react-app reactdataviz-project

Congratulations! You just created a React app. With all the setup and the fuss that goes into using a modern JavaScript toolchain.

Your next step is to run your app:

$ cd reactdataviz-project
$ npm start

A browser tab should open with a blank page and a spinning React logo.

If that didn't work, then something must have gone terribly wrong. You should consult the official docs. Maybe that will help.

Install extra dependencies (0:45)
Created by Swizec with ❤️