Before you begin, please:

  • Download personal IDE, recommend vscode official website
  • Install Node, node official website

After downloading, open bash(CMD) or vscode terminal and check the node version number to see if node is properly installed. Type: node -v; Check the NPM version number: NPM -v;

The demos I have written are based on the following versions

  • Node: v10.23.0
  • NPM: 6.14.8

The tools used

I chose create-react-app to create the React project for two reasons:

  • Create-react-app is an official method supported by react to create react applications.
  • Save time and effort, just focus on the code, no need to do webpack, Babel, etc. Create-react-app is pre-configured and hidden.

Project Creation Steps

  1. Create a new project project folder named my-react:

  1. Open the folder with vscode, open the terminal, and type:npm i create-react-app -gInstall react scaffolding globally:

  1. usecreate-react-app react_demosCreate project (check warnings during installation, if the node version is too early, upgrade the node version appropriately):

After the project is created, a react_demos folder is automatically generated, as shown in the following figure:

Let me briefly explain the list:

  • Node_modules is the node module that stores the dependencies of the project and can be usednpm i [packageName] -STo install the packages we need;
  • Public is used to store template pages and other files that do not need to be packaged and compiled (e.g., third-party plug-ins). Public /index.html is the page template.
  • SRC is the folder where we write source code during development. Webpack will package and compile these files in the future. SRC /index.js is the entry point of the project.
  • For public/index.html and SRC /index.js, it is best not to delete or modify the file name, but to delete other files freely;
  1. Enter the command:cd react_demosEnter the project andnpm startStart the project and you will find that the project automatically starts successfully and opens automaticallyYou can see a sample react project at http://localhost:3000:

  1. Delete unnecessary files from public and SRC (remember to remove references from index.js and index.html, otherwise an error will be reported).
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <div>Hello, Big Susha</div>.document.getElementById('root'));Copy the code

The code in index.html is as follows:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="# 000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Learn react from Su Xia</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Copy the code

Finally save and open the browser, you will find the following page:

This should give you a general idea of how to use create-React-app and how to build a project. In the next installment, we’ll cover how to use the framework and write some simple demos for learning purposes.