DEV Community

Cover image for What is Create React App? Part 1 (Installation)
Jessica Wilkins
Jessica Wilkins

Posted on

What is Create React App? Part 1 (Installation)

#react #javascript #webdev #beginners

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?

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
Enter fullscreen mode Exit fullscreen mode

If installed, then you should see a version number.

v16.10.0
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

You should see that you are now in the Desktop.

jessicawilkins@Dedrias-MacBook-Pro-2 Desktop %
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

cd demo-react-app
Enter fullscreen mode Exit fullscreen mode

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

npm start
Enter fullscreen mode Exit fullscreen mode

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

default react project

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

You should see that you are now in the Desktop.

jessicawilkins@Dedrias-MacBook-Pro-2 Desktop %
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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

cd my-app
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Then run this command and hit enter.

 cd my-app
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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

jessicawilkins@Dedrias-MacBook-Pro-2 example-folder %
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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

npm init react-app .
Enter fullscreen mode Exit fullscreen mode

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

yarn create react-app .
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
themihir profile image
Mihir Das • • Edited

Waiting for next part ....
Thanks

Collapse
 
codergirl1991 profile image
Jessica Wilkins •

Part 2 is out :)

Collapse
 
asapsonter profile image
Sam Sonter •

Pls may i ask where and how you host your static sites?

Thread Thread
 
codergirl1991 profile image
Jessica Wilkins •

For react projects I like to use netlify. For html, css and vanilla JS projects I use GitHub pages. I feel like both of those options have good documentation and make it easy to deploy the sites. Hope that helps!

Thread Thread
 
asapsonter profile image
Sam Sonter •

I hvae tried using github pages, but i cant use my own layout templates..

Collapse
 
obaino82 profile image
Obaino82 •

💖🎉

Collapse
 
devstar234 profile image
DevStar234 •

Thanks for your active posting.
In future, I want to accept more and more advices.

Read next

keploy profile image

SOAP vs REST API: Understanding the Differences

keploy -

apurvupadhyay profile image

Qwen2.5 Coder — The Future of Local Code Generation! 🎉

Apurv Upadhyay -

stroiman profile image

Go-DOM - 1st major milestone

Peter Strøiman -

prince_beec5ccde00b7c6c73 profile image

Smart Screen Animation using html css and javascript

Prince -