create-react-app

Outline
Install Node
- macOS
- Windows
Install create-react-app
Create React project
Start project
Rendering
Fast refresh
Completed

create-react-app series

This blog post is a series. You can see other blog posts of the series on the list.

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.

GitHub: https://github.com/dev-yakuza/study-create-react-app/tree/main/1.create-react-app

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!

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.