Detailed introduction of React scaffolding tools to create projects

React Scaffolding Tools

Scaffolding tool analysis

If we just develop a few small demo programs, then we never need to consider some complex issues :

For example, how the directory structure is organized and divided;

such as how to manage interdependencies between files;

For example, how to manage the dependencies of third-party modules;

For example, how to compress and package the project before the project is released;

and many more…

But modern front-end projects have become increasingly complex :

It will no longer be as simple as introducing several css files in HTML, but introducing several written js files or third-party js files;

For example, css may be written using preprocessors such as less and sass, and we need to convert them into ordinary css to be parsed by browsers;

For example, JavaScript code is no longer just written in a few files, but is composed of hundreds of files in a modular way, and we need to manage their interdependence through modular technology;

For example, the project needs to depend on many third-party libraries, how to better manage them (such as managing their dependencies, version upgrades, etc.);

In order to solve the above problems, we need to learn some tools :

For example, babel, webpack, gulp, configure their conversion rules, package dependencies, hot updates, etc.;

The emergence of scaffolding is to help us solve this series of problems;

The scaffolding mentioned in programming is actually a tool that helps us to quickly generate the engineering structure of the project;

Each project achieves a different result, but their basic engineering structure is similar;

Since it is similar, there is no need to build from scratch every time, and some tools can be used to help us produce basic engineering templates;

Different projects can be developed on the basis of this template or simply modified some configurations;

This can also indirectly ensure the basic institutional consistency of the project and facilitate later maintenance;

Summary: Scaffolding makes the whole process fast and convenient from construction to development to deployment;

---

create-react-app

The three most popular frameworks have their own scaffolding:

Scaffolding for Vue: @vue/cli

Angular scaffolding: @angular/cli

React scaffolding:create-react-app

Their role is to help us generate a common directory structure and have already configured the engineering environment we need.

What do you need to rely on to use these scaffolding ?

Currently these scaffolds are all written using node and are all based on webpack;

So we must install the node environment on our own computer;

Here we are mainly learning React, so we use React's scaffolding tool: create-react-app as an explanation ;

The React scaffolding itself needs to depend on node, so we need to install the node environment :

Whether it is Windows or Mac OS, it can be downloaded directly from the node official website;

Official website address: https://nodejs.org/en/download/

Note: It is recommended that you download the LTS (Long-term support) version, which is a long-term support version and will be relatively stable;

After downloading, double-click to install:

During installation, environment variables are automatically configured;

When installing, it will help us install the npm management tool at the same time;

Create a React project

We need to install the React scaffolding tool, install it globallynpm i create-react-app -g

After the installation is complete, we can create a React project through scaffolding

Command to create React project:create-react-app 项目名称

Note: Project names cannot contain capital letters

In addition, there are more ways to create projects, you can refer to the GitHub readme

After the creation is complete, enter the corresponding directory, and you can run the project:

The package management tool yarn used by React in the early days, input yarn startwill run the project;

At present, the project created by React uses the npm package management tool, and the input npm run startcan run the project

directory structure analysis

The entire directory structure is very easy to understand, but there is a PWA-related concept :

The full name of PWA is Progressive Web App, that is, progressive WEB application;

First of all 一个网页, a PWA application can write a web application through Web technology;

Then add App Manifest and Service Worker to realize PWA installation and offline functions;

This form of web presence, which we also call is Web App;

What problems does PWA solve?

You can add the PWA website to the home screen like an application, click the home screen icon to realize the startup animation and hide the address bar;

Implement offline cache function, even if the user's mobile phone does not have a network, some offline functions can still be used;

Implemented message push;

And so on a series of functions similar to Native App;

For more PWA-related knowledge, you can learn more by yourself ( the company basically does not use PWA, just understand it ) ;

Link: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

Code from scratch

After creating a project through scaffolding, many people still feel that the directory structure is too complicated, so I plan to take everyone to write code from scratch.

Let's delete all the unnecessary files first :

Under the public file, delete all files except favicon.ico and index.html

The src folder is where we write the source code. All files generated in the src folder by the default project creation can be deleted.

After the deletion is complete, we need to create an index.js file, because this is the entry file packaged by webpack, and start writing React code in index.js :

We will find that the logic is consistent with the code written;

Just in modular development, we need to manually import React and ReactDOM, because they are all in the modules we installed;

import ReactDOM from "react-dom/client"

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<h2>哈哈哈哈</h2>)

** root.renderComponents can be rendered, we can write a component to render by render**

import React from "react"
import ReactDOM from "react-dom/client"

class App extends React.Component {
    
    
  constructor() {
    
    
    super()
    this.state = {
    
    
      message: "Hello React"
    }
  }

  render() {
    
    
    const {
    
     message } = this.state
    return (
      <div>
        <h2>{
    
    message}</h2>
      </div>
    )
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

If we don't want root.renderto , we can extract a component to a App.jsfile or App.jsxfile separately :

// App.js

import React from "react"

class App extends React.Component {
    
    
  constructor() {
    
    
    super()
    this.state = {
    
    
      message: "Hello React"
    }
  }

  render() {
    
    
    const {
    
     message } = this.state
    return (
      <div>
        <h2>{
    
    message}</h2>
      </div>
    )
  }
}

export default App

// index.js

import ReactDOM from "react-dom/client"
import App from "./App"


const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)