Chapter 2. Efficiently Bootstrapping React Applications with Create React App

The first React tool you'll learn about in this book is Create React App. It is a command-line utility that helps you, surprisingly, create a React application. This might sound like something that you shouldn't need much help doing, but when you use this tool, there's a lot of configuration that you no longer have to think about. In this chapter, you'll learn:

• Installing the Create React App tool on your system
• Bootstraping the creation of your React app
• What packages are installed when you create a new application
• The directory organization and files created with your application

Installing Create React App

The first step is installing Create React App, which is an npm package: create-react-app. This package should be installed globally because it installs a command on your system that's used to create your React projects. In other words, create-react-app isn't actually part of your React project—it's used to initialize your React project.

Here's how you can install Create React App globally:

$ npm install -g create-react-app

Notice the -g flag in the command—this makes sure that the create-react-app command is installed globally. Once the installation is complete, you can make sure that the command is good to go by running the following:

$ create-react-app -V

> 1.4.1

Now you're ready to use this tool to create your first React app!

Creating your first app

We'll spend the remainder of the chapter creating your first React application with Create React App. Don't worry, this is super easy to do, so it'll be a short chapter. The goal of Create React App is to start building...

Summary

In this chapter, you learned how to install the Create React App tool on your system. Create React App is the tool of choice for bootstrapping modern React applications. The goal of Create React App is to have developers go from nothing to creating React components in minimal time.

Once this tool was installed, you created your first React app using it. The only piece of configuration you had to provide was the application name. Once the tool finished installing dependencies and creating boilerplate files and directories, you were ready to start writing code.

Then, we looked at react-scripts and the dependencies that this package takes care of for you. You were then taken on a whirlwind tour of the overall structure of the application that was created for you.

In the following chapter, we'll start developing some React components. To do this, we'll fire up the development server. You'll also learn how to get up and running with a create-react-app development environment.