16
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.
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.
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.
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.
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 -vIf installed, then you should see a version number.
v16.10.0If 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.
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 DesktopYou 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-appThis 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-appThen you need to type in cd followed by the name of your new React project.
cd demo-react-appThen run npm start in the command line. That will start the local server and open up your new React app.
npm startA 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.
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 DesktopYou 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-appThis 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-appThen 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.
First check if Yarn is installed on your local machine by running this command in the command line and hitting enter.
yarn --versionIf it is installed, then it will come back with a version number like this.
jessicawilkins@Dedrias-MacBook-Pro-2 ~ % yarn --version
1.22.17If 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-appYou should start to see these messages in the command line.
yarn create v1.22.17
success Installed "[email protected]" 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-appThen 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.
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-folderYou 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
16