Search⌘ K
AI Features
Home
Courses
The Road to React: The One with Class Components

Zero-Configuration Setup

Explore how to set up a React application quickly using create-react-app without manual configuration. Understand the generated folder structure, key files, and npm scripts to run, test, and build your app for development and production.

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:

Shell
npm install -g create-react-app

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

Shell
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:

Shell
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:

NAME_
CSS
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:

  • README.md: The .md extension indicates the file is a markdown file. Markdown is used as a lightweight markup language with plain text formatting syntax. Many source code projects come with a README.md file to give you initial instructions about the project. When pushing your project to a platform such as GitHub, the README.md file usually displays information about the content contained in the repository. Because you used create-react-app, your README.md should be the same as the official create-react-app GitHub repository.

  • node_modules/: This folder contains all node packages that have been installed via npm. Since you used create-react-app, there should already be a couple of node modules installed for you. You will rarely touch this folder, because node packages are generally installed and uninstalled with npm from the command line.

  • package.json: This file shows you a list of node package dependencies and other project configurations.

  • .gitignore: This file displays all files and folders that shouldn’t be added to your git repository when using git; such files and folders should only be located in your local project. The node_modules/ folder is one example. It is enough to share the package.json file with others, so they can install dependencies on their end with npm install without your dependency folder.

  • public/: This folder holds development files, such as public/index.html. The index is displayed on localhost:3000 when developing your app. The boilerplate takes care of relating this index with all the scripts in src/.

  • build/ This folder is created when you build the project for production, as it holds all of the production files. When building your project for production, all the source code in the src/ and public/ folders are bundled and placed in the build folder.

  • manifest.json and registerServiceWorker.js: These files won’t be used for this project, so you can ignore them for now.

In the beginning, everything you need is located in the src/ folder. The main focus lies on the src/App.js file which is used to implement React components. It will be used to implement your application, but later you might want to split up your components into multiple files, where each file maintains one or more components on its own.

Additionally, you will find a src/App.test.js file for your tests, and a src/index.js as an entry point to the React world. You will get to know both files intimately in a later chapter. There is also a src/index.css and a src/App.css file to style your general application and components, which comes with the default style when you open them. You will modify them later as well.

The create-react-app application is a npm project you can use to install and uninstall node packages. It comes with the following npm scripts for your command line:

Shell
# Runs the application in http://localhost:3000
npm start
# Runs the tests
npm test
# Builds the application for production
npm run build

The scripts are defined in your package.json, and your basic React application is bootstrapped. The following exercises will finally allow you to run your bootstrapped application in a browser.

Exercises:

  • npm start your application and visit the application in your browser (Exit the command by pressing Control + C)
  • Run the npm test script
  • Run the npm run build script and verify that a build/ folder was added to your project (you can remove it afterward. Note that the build folder can be used later on to deploy your application)
  • Familiarize yourself with the folder structure
  • Check the content of the files

Further Reading: