Zero-Configuration Setup

This section will show you how to set up your application using create-react-app.

We'll cover the following...

In the Road to learn React, we will be using create-react-app to bootstrap your application. It’s an opinionated yet zero-configuration starter kit for React introduced by Facebook in 2016, recommended for beginners by 96% of React users. In create-react-app the tooling and configuration evolve in the background, while the focus is on the application implementation.

To get started, install the package to your global node packages, which keeps it available on the command line to bootstrap new React applications:

Press + to interact
npm install -g create-react-app

You can check the version of create-react-app to verify a successful installation on your command line:

Press + to interact
create-react-app --version
*v1.5.1

Now you are ready to bootstrap your first React application. The example will be referred to as hackernews, but you may choose any name you like. First, navigate into the folder:

Press + to interact
create-react-app hackernews
cd hackernews

Now you can open the application in your editor. The following folder structure, or a variation of it depending on the create-react-app version, should be presented to you:

Press + to interact
hackernews/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js

Breaking down

This is a breakdown of the folders and files: