What is Create React App? Part 1 (Installation)

If you are new to React and want to start building your own projects, then there is a helpful tool you can use.

Create React App makes it simple to get started coding in React because it comes with all of the starter files needed to build your projects.

But once you have React installed you might be wondering, "What are all of these files and folders?"

I had the exact same reaction when I first started using Create React App. So I decided to write a series of articles detailing everything that comes with Create React App.

In part 1, I will walk you through how to install React using Create React App and the command line.

• What is Create React App?
• What is the command line?
• Checking for Node installation
• Installing React using npx Create React App
• Installing React using npm or Yarn
• How to add React to an existing project using Create React App

What is Create React App?

Create React App is a quick way to get started creating single page React apps.

You don't have to worry about how to configure webpack or babel. Create React App configures all of that for you.

Create React App only works for creating front end projects. If you need to add a backend component or database, then you will need to look into other technologies for that.

When you are done creating your React app, you can create an optimized build folder and deploy your project using something like Netlify.

What is the command line?

Before we can get started with creating a new React app, we need to understand how to access the command line.

The command line is a place where you can type out commands for the computer to execute. Some of these commands include creating new files/ folders and installing new technologies on your computer.

If you are on a Mac, you can access the command line by using the Spotlight Search to find the Terminal App. Here is a helpful walkthrough guide on how to find the Terminal app.

If you are on a Windows, you can access the command line by clicking the Start menu and typing in cmd. Here is a helpful walkthrough guide on how to access the command prompt for the different Windows versions.

Checking for Node installation

Before we get started, you will need to have Node version 10 or higher installed on your local machine.

If you are not sure if Node is installed, run this command in the command line.

node -v

If installed, then you should see a version number.

v16.10.0

If it does not come back with a version number, then you will need to install Node.

You can go to the official Node.js page to install Node on your local machine.

If you need more assistance installing Node.js, then please look into these helpful guides.

• How to install Node on Mac
• How to install Node on Windows

Installing React using npx Create React App

npx is a helpful tool you can use to download packages from the npm registry.

The first step is to go to the location on your computer where you want to create your new React app. I am going to create my new app on the Desktop.

Open up your command line and type in this command and hit enter. cd stands for change directory.

cd Desktop

You should see that you are now in the Desktop.

jessicawilkins@Dedrias-MacBook-Pro-2 Desktop % 

Then run this command in the command line and hit enter. This will create a new react project in the Desktop.

You can name your project whatever you want. I am going to name my project demo-react-app.

npx create-react-app demo-react-app

This process usually takes a few minutes. You should start to see these messages in the command line.

Creating a new React app in /Users/jessicawilkins/Desktop/demo-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

When the installation is complete you should see this message in the command line.

Success! Created demo-react-app at /Users/jessicawilkins/Desktop/demo-react-app

Then you need to type in cd followed by the name of your new React project.

cd demo-react-app

Then run npm start in the command line. That will start the local server and open up your new React app.

npm start

A new browser window will open at http://localhost:3000/.
You should see this result on the screen.

You should see this result in the command line.

Compiled successfully!

You can now view demo-react-app in the browser.

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

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

Congratulations! You have successfully created a new React application. 😃

To stop your local server, please use the keyboard command Ctrl+C in the command line.

Installing React using npm or Yarn

Installing using npm

The first step is to go to the location on your computer where you want to create your new React app. I am going to create my new app on the Desktop.

Open up your command line and type in this command and hit enter. cd stands for change directory.

cd Desktop

You should see that you are now in the Desktop.

jessicawilkins@Dedrias-MacBook-Pro-2 Desktop % 

Then run this command in the command line and hit enter. This command will only work if you have npm version 6 or higher.

You can choose to name your application whatever you like. I am going to name mine my-app.

npm init react-app my-app

This usually takes a few minutes but you should start to see these messages in the command line.

Creating a new React app in /Users/jessicawilkins/Desktop/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

When the installation is complete, change directory to the new project folder by running this command.

cd my-app

Then run npm start and hit enter.

A new browser window will open at http://localhost:3000/.
You should see this result on the screen.

To stop your local server, please use the keyboard command Ctrl+C in the command line.

Installing using Yarn

First check if Yarn is installed on your local machine by running this command in the command line and hitting enter.

yarn --version

If it is installed, then it will come back with a version number like this.

jessicawilkins@Dedrias-MacBook-Pro-2 ~ % yarn --version
1.22.17

If it does not come back with a version number, then you will need to install Yarn.

Please read through the detailed instructions on how to install Yarn on your local machine.

Then change directories to your Desktop folder using the command line.

Run this command in the command line and hit enter. This will only work if you have Yarn version .25 or higher.

You can choose to name your React app whatever you like. I am going to name mine my-app.

yarn create react-app my-app

You should start to see these messages in the command line.

yarn create v1.22.17
success Installed "create-react-app@4.0.3" with binaries:
      - create-react-app
[####################################################################] 68/68
Creating a new React app in /Users/jessicawilkins/Desktop/my-app.

Then run this command and hit enter.

 cd my-app

Then run yarn start which starts your local server for the new React application.

A new browser window will open at http://localhost:3000/.
You should see this result on the screen.

To stop your local server, please use the keyboard command Ctrl+C in the command line.

How to add React to an existing project using Create React App

You will first need to go to the location of your existing project folder. In this example, I am have a folder called example-folder located on the Desktop.

This is what the command would look like.

cd Desktop/example-folder

You should now see that you are in the project folder.

jessicawilkins@Dedrias-MacBook-Pro-2 example-folder % 

Then run this command if you are using npx and hit enter. The space and period at the end of the command are important because it tells the computer to create a new React application in that existing folder.

npx create-react-app .

Run this command if you are using npm and hit enter.

npm init react-app .

Run this command if you are using Yarn and hit enter.

yarn create react-app .

That is the whole process for creating a new React application using Create React App.

If you want to learn more about creating new React apps using templates or TypeScript, then please read through the detailed instructions from the documentation.

In part 2, we will learn about the following files and folders:

• package.json
• package-lock.json
• README.md
• node_modules