What is Create React App? Part 1 (Installation)
Tags: react, javascript, webdev, beginners
Published: 2021-11-28 03:52:12

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](https://create-react-app.dev/) 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-create-react-app)
* [What is the command line?](#what-is-the-command-line)
* [Checking for Node installation](#checking-for-node-installation)
* [Installing React using npx Create React App](#installing-react-using-npx-create-react-app)
* [Installing React using npm or Yarn](#installing-react-using-npm-or-yarn)
* [How to add React to an existing project using Create React App](#how-to-add-react-to-an-existing-project-using-create-react-app)


## What is Create React App?
[Create React App](https://create-react-app.dev/) is a quick way to get started creating single page React apps. 

You don't have to worry about how to configure [webpack](https://webpack.js.org/) or [babel](https://babeljs.io/). 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](https://www.netlify.com/).

## 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](https://www.computerhope.com/issues/ch000095.htm) 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](https://www.computerhope.com/issues/chdos.htm) 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](https://nodejs.org/en/download/) 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](https://nodesource.com/blog/installing-nodejs-tutorial-mac-os-x/)
* [How to install Node on Windows](https://www.guru99.com/download-install-node-js.html)

## Installing React using npx Create React App
`npx` is a helpful tool you can use to download packages from the [npm registry](https://www.npmjs.com/).

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.

![default react project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oay6j8p2ablztkrrzhky.png)

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. :smiley:

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.

![default react project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oay6j8p2ablztkrrzhky.png)


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](https://classic.yarnpkg.com/en/docs/getting-started) 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.

![default react project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oay6j8p2ablztkrrzhky.png)

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](https://create-react-app.dev/docs/adding-typescript/), then please read through the detailed instructions from the [documentation](https://create-react-app.dev/docs/getting-started#selecting-a-template). 

In [part 2](https://dev.to/codergirl1991/what-is-create-react-app-part-2-packagejsonreadme-nodemodules-1bh9), we will learn about the following files and folders:

*  `package.json`
*  `package-lock.json`
* `README.md`
*  `node_modules`