Contents
Deprecated issue
Currently, The create-react-app is not maintained well, so it’s removed from the official document of React.
However, the official GitHub repository of create-react-app is not Deprecated yet.
- create-react-app: https://github.com/facebook/create-react-app
There was a heated discussion about the Deprecated of create-react-app.
In conclusion, create-react-app is preparing to change in a different form.
However, it’s true that it’s not maintained well, so it’s recommended to use Vite when starting a new React project. You can check how to start a React project using Vite through the following link.
create-react-app series
This blog post is a series. You can see other blog posts of the series on the list.
- What is React
- create-react-app
- TypeScript in create-react-app
- [TypeScript] Make Import path based on Root in create-react-app
- styled-components in create-react-app
- Jest
- Test with react-testing-library in create-react-app
Outline
When we start to develop the React project, we need to configure too many settings like Babel, Webpack, etc. These settings make us annoyed start the React project.
Facebook that makes and maintains React recognized this problem, and they provide create-react-app cli tool for many people to start the React project easily and fastly.
- create-react-app: https://github.com/facebook/create-react-app
In this blog post, we’ll see how to use create-react-app to create and start the React project.
You can see the source code on GitHub.
Install Node
To develop the React project with create-react-app, you need to install Node. Install Node for your system by following.
macOS
Homebrew is a package manager for macOS to install and manage packages. You can simple install packages with Homebrew. Execute the command below to install Homebrew.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
After installing, execute the following command to check Homebrew installed well.
brew --version
If the version is now shown up, exit Termital and restart it. If you already installed Homebrew, you can skip this step. Next, execute the command below to install Node.
brew install node
Windows
In Windows, Chocolatey is a package manager. Open the CMD or Powershell with Administrator privileges. Execute the command below to install Chocolatey.
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
After installing, execute the following command to check Chocolatey installed well.
choco –version
If the version of Chocolatey is not shown up, exit CMD or Powershell and restart it. After installing Chocolatey, execute the command below to install Node.
choco install -y nodejs.install
Install create-react-app
We need to create-react-app to start the React project. Execute the command below to install create-react-app.
npm install -g create-react-app
After installing, execute the command below to check create-react-app installed well.
create-react-app --version
If the installation doesn’t have any problem, you can see the version of the create-react-app.
4.0.0
Create React project
Next, let’s create a React project by using create-react-app.
npx create-react-app my-app
When you execute the command above, you can see the React project is created like below.
|-- public
|-- src
|-- package-lock.json
|-- package.json
The create-react-app has some files and folders on the React project. The below is about the details of them.
- public: You can see the static files(e.g. index.html) on this folder.
- public/index.html: React project will be shown up in this file.
- src: The React source code will be saved in here.
- src/index.js: This file helps us to render the React components to the index.html file.
- src/App.js: The sample of the React component.
- src/App.css: The CSS file for the App component.
- src/App.test.js: The test file for the App component.
- src/reportWebVitals.js: The configuration file to check the performance of the React project.
- src/setupTests.js: The configuration file for the React test.
- package.json: This file will manage the libraries that we use for the React development.
Start project
In the React project created by create-react-app, you can see the scripts below when you open the package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Below is the details of the scripts that you can use the React project created by create-react-app.
- start: Start the development server for the React development.
- build: Build the React project for release.
- test: Test the React project.
- eject: Eject the React project from the create-react-app management.
Let’s execute the command below to start the React project.
npm start
When you execute the command above, you can see the browser is opened automatically and navigate the http://localhost:3000 page. And you can see the screen on it like below.
Rendering
Let’s see how to render the React project that we’ve created by create-react-app.
First, open the public/index.html file. You can see the contents below.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<div id="root"></div>
...
</body>
</html>
React is also a web application, so to display it, we need a HTML file. The public/index.html file does the role, and the React project that we develop will be shown on this index.html file.
Next, when you open the index.js file on the src folder, you can see the contents below.
import React from 'react';
import ReactDOM from 'react-dom';
...
import App from './App';
...
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
...
In this file, React uses ReactDom to find the HTML element with id = root, and renders the <App /> component to it. In here, The App component is from src/App.js file and the component is loaded by import to show it on the screen.
You can start the React project by executing the command below.
npm start
After starting, you can see http://localhost:3000 page is automatically opend on the browser and the React project is running on it. And you can see the screen like below by open the development mode with the React project.
As we’ve seen contents in src/index.js file and public/index.html file, The src/App.js contents in the React project is rendered in the HTML element(id = root).
Fast refresh
We can start the React project created by create-react-app with the command below.
npm start
create-react-app provides the local development server for us to develop the React project easily. And the create-react-app development server provides the Fast refresh feature.
This Fast refresh feature is when we modify and save the files for developing, this feature catches the modification and refreshes the browser automatically. This feature is very useful and makes the development speed higher.
So, we don’t need to refresh the browser everytime when we modify the file to develop the React project!
Completed
We’ve seen how to use create-react-app to create and start the React project on this blog post. Now, you can start the React project simply and fastly via create-react-app. Let’s start!
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
