create-react-app

React has a lot of advantages, but how does one start working with it? To discuss its functionality first of all we need to create a new React app. There are several ways to start a new React project, but our goal right now is to study React from the basic examples, and Create React App is the most suitable tool for that. It's easy-to-use and helpful primarily for learning purposes or creating single-page apps.

Overview

Create React App is a command line tool for React development. It provides a ready environment that includes the parts that are required for the development: compiler, linter, testing library, and so on. You can learn more about the opportunities that this tool provides in the official repository.

The philosophy of Create React App consists of three points:

1. One dependency: although Create React App uses many external projects, you don't need to monitor all these dependencies, because the app does it for you;

2. No configuration: you don't need to select and configure anything to write the code or to create a production build;

3. No lock-in: you can change the default project settings to a custom setup any time you want; in Create React App it's called "eject".

Preparation

Before using Create React App, you should install Node.js from its official site. Also, npm comes automatically with Node.js (you don't need to install it manually). You can make sure if both are installed successfully by checking their versions in the command line. Try the next commands:

node -v
npm -v

Here's the possible output:

Node.js version should be 10 or above on a local development machine ( but it's not required for servers). It's recommended to choose the latest long term support version.

Creating a new project

Now we are ready to start. To create a new React project switch to the desired folder in the command line and run one of these two commands:

1. npx create-react-app my-app (npm version should be 5.2 or above)

2. npm init react-app my-app (npm version should be 6 or above)

Here my-app is the name of the new project. You can choose your own name.

Then enter the project folder by the cd my-app command, and run your app in the development mode by npm start. Open http://localhost:3000/ in the browser to view the app. You will see the starting page with the animated React logo:

Also, you may use Yarn instead of npm. In this case, install it separately; its version should be 0.25 or above. Creating a project will look like this:

yarn create react-app my-app
cd my-app
yarn start

Project structure

A new React project has the following structure:

node_modules folder contains dependencies of the project mentioned above.

Files in the public folder are available to browsers. public/index.html is the main page, it must be kept with its original name. Only files from public may be used in public/index.html.

The src folder is our main workspace. It will contain all the React components that we write. src/index.js is the JavaScript entry point, so it also should have its original name. All JS and CSS files of the project must be kept in this folder or they will not be processed during the project rebuild. This is due to the optimization of webpack: it processes only src for faster rebuilds.

To organize files more neatly, we may create subfolders in src.

package.json defines the project information: its name, version, minimal versions of dependencies, and others. package-lock.json keeps the exact versions of dependencies for a specific version of the project.

All the files except public/index.html and src/index.js can be deleted or renamed.

If Git is installed on your computer, it will automatically create a new repository for your project.

Read more on this topic in Mastering the useState Hook in React on Hyperskill Blog.

Conclusion

Create React App makes React development easier and more enjoyable. You don't need to search for packages, install them, and monitor their workability by yourself. You also don't need to manage builds. Just use quite a simple command line interface, and you can start working on your own app.