3.2 React Tooling

Create React App

This is the batteries included way to create a new React project.

The simplest way to get started on a new React project is to use create-react-app to scaffold out a standard project folder structure. The other build tools that you will need like Webpack, Jest, and Babel are automatically installed and configured with sane default settings.

It is a very popular tool with over 147,000 weekly downloads on NPM.

Read the full documentation (opens new window) on the project's official website.

# Lets try it out

Using CRA, initialize a new React project called "my-sample-app".

# Use `npx` to get the latest version of `create-react-app`
npx create-react-app my-sample-app
cd my-sample-app

1
2
3

TIP

Using npx to run create-react-app means that you will always be getting the latest version of React and the whole dependency tool-chain.

This will create a new folder called "my-sample-app" in the current working directory. This new project folder will have a structure similar to this:

my-sample-app
├── .gitignore
├── README.md
├── package.json
├── yarn.lock
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── reportWebVitals.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

All of the build tools and related configuration are tucked out of the way in the node_modules folder. They are invoked via the "scripts" defined in package.json.

yarn start
  Starts the development server.

yarn build
  Bundles the app into static files for production.

yarn test
  Starts the test runner.

yarn eject
  Removes this tool and copies build dependencies, configuration files
  and scripts into the app directory. If you do this, you can’t go back!

1
2
3
4
5
6
7
8
9
10
11
12

# Start the dev server

yarn start
#or
npm run start

1
2
3

You should now see confirmation in the terminal ...

Compiled successfully!

You can now view my-sample-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.16.1.101:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

1
2
3
4
5
6
7
8
9

Webpack's node.js development environment web server is now running with hot-module-replacement (HMR) activated. If it did not open automatically (permissions are required), open http://localhost:3000 (opens new window) in your browser to see the sample content.

Remember

Press CTRL c in the terminal to stop the web server.

# Yarn vs NPM

By default, create-react-app will assume that you are using Yarn to manage your React project. All the comments and hints that it leaves in the console will be about using the yarn commands like:

yarn start

If you prefer to continue using npm instead of yarn and you want the instructions to use npm examples, then add the --use-npm flag when creating your project.

npx create-react-app my-project --use-npm
cd my-project
npm run start

1
2
3

# How CRA builds the project structure and Tool chain

The home page of this repo explains more about the project structure with create-react-app and how the tool chain is used.

https://github.com/nitishdayal/cra_closer_look (opens new window)

The Create React App repo (opens new window)

# The Production Version

The development webserver includes lots of things to help streamline the development process, like hot-module-replacement and source maps for debugging. You do not want to include these in production.

For a production deployment, we need to have Webpack optimize the code by stripping out anything that is not absolutely needed and compile the JavaScript down to an older (more broadly compatible) version. Lets try this out by running the build script from the terminal / command prompt.

yarn build
#or
npm run build

1
2
3

This will compile the project and place the output files into the build folder.

You can then copy the build folder to your production server. We will cover more about production deployment best practices in a later module. For now, you can test the production build by changing into the build folder and running a local node webserver (opens new window).

cd build
npx serve

1
2

The production build can be now be tested in your browser @ http://localhost:5000 (opens new window)

# Reference

← Jest React Components, Props, & Refs →