Learning to build React scaffolding

1. Complexity of front-end engineering

If we are just developing a few small demo programs, we will never need to consider some complex issues:

For example, how to organize and divide the directory structure; how to manage the dependencies between files; how to manage the dependencies of third-party modules; how to compress and package the project before publishing; and so on...

Modern front-end projects have become increasingly complex:

• It is no longer as simple as importing a few CSS files, a few self-written JS files or third-party JS files into HTML;
• For example, CSS may be written using preprocessors such as less or sass, and we need to convert them into normal CSS so that it can be parsed by the browser;
• For example, JavaScript code is no longer written in just a few files, but is composed into hundreds or thousands of files in a modular way. We need to use modular technology to manage the interdependencies between them.
• For example, if a project needs to rely on many third-party libraries, how can we better manage them (such as managing their dependencies, version upgrades, etc.)?
  

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

• For example, babel, webpack, and gulp. Configure their conversion rules, packaging dependencies, hot updates, etc.
• The emergence of scaffolding is to help us solve this series of problems;

2. What is scaffolding?

Traditional scaffolding refers to a structure in architecture: a temporary frame built when constructing a building or structure;

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

• Each project achieves a different result, but their basic engineering structure is similar;
• Since they are similar, there is no need to build from scratch every time. We can use some tools to help us produce basic engineering templates.
• For different projects, you can develop projects based on this template or make some simple configuration changes.
• This can also indirectly ensure the basic structural consistency of the project and facilitate subsequent maintenance;
  

Summary: Scaffolding makes the entire process from project construction to development and then to deployment fast and convenient;

3. Front-end scaffolding

The three most popular frameworks now all have their own scaffolding:

• Vue Scaffolding: vue-cli
• Angular Scaffolding: angular-cli
• React Scaffolding: create-react-app

Their role is to help us generate a common directory structure and configure the engineering environment we need.
What do these scaffolds depend on?

• Currently, these scaffolds are all written in node and are based on webpack;
• So we must install the node environment on our computer;

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

4. Install node

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

Whether it is Windows or Mac OS, you can download it 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 more stable;

After downloading, double-click to install:
1. During the installation process, environment variables will be automatically configured;
2. During installation, it will also help us install the npm management tool;

Enter the following command:

node --version
npm --version

If the version number appears, it means the installation was successful.

5. Package Management Tools

What is npm?

• The full name is Node Package Manager, which means "node package manager";
• The role is definitely to help us manage dependent toolkits (such as react, react-dom, axios, babel, webpack, etc.);
• The author developed this to solve the problem of "bad module management";

In addition, there is a well-known node package management tool yarn:

• Yarn is a new JS package management tool jointly launched by Facebook, Google, Exponent and Tilde;
• Yarn was created to make up for some of the shortcomings of npm;
• Early npm had many defects, such as slow installation of dependencies, confusing version dependencies, and a series of other problems;
• Although there have been many upgrades and improvements since npm5, many people still like to use yarn;
• React scaffolding also uses yarn by default;

npm install -g yarn

Enter yarn --version . If the version number is output, it means the installation is successful.

6. Comparison of Yarn and npm commands

7. Install scaffolding

Supplement: In China, in some cases, using npm and yarn may not be able to install a library properly. At this time, we can choose to use cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

The last thing you need to install is the scaffolding for creating a React project:

npm install -g create-react-app

Enter create-react-app --version . If the version number is output, it means the installation is successful.

8. Create a React project

Now, we can create a React project through scaffolding.

The command to create a React project is as follows:

Note: Project names cannot contain uppercase letters.

There are more ways to create projects, please refer to GitHub's readme

create-react-app Project Name 

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

cd 01-test-reactyarn start 

9. Directory structure analysis

10. Understand PWA

The entire directory structure is very easy to understand, except for the concept of PWA:

• PWA stands for Progressive Web App, which is a progressive WEB application;
• A PWA application is first a web page, and a web application can be written using web technology;
• Then add App Manifest and Service Worker to implement PWA installation and offline functions;
• We also call this form of Web existence a Web App;
  

What problems does PWA solve?

• Can be added to the home screen, click the home screen icon to start the animation and hide the address bar;
• Implement offline caching function, so that users can still use some offline functions even if their mobile phones have no network;
• Implemented message push;
• And a series of functions similar to Native App;

11. What is webpack

We said that React's scaffolding is configured based on Webpack:

• webpack is a static module bundler for modern JavaScript applications;
• When webpack processes an application, it recursively builds a dependency graph containing every module that the application needs, and then packages all of these modules into one or more bundles;
  

12. Webpack in Scaffolding

We will not discuss webpack here, because there is a lot of content (there will be a special topic on webpack later);
But, it’s strange: we don’t see anything webpack related in the directory structure?

The reason is that the React scaffolding hides the webpack-related configuration (in fact, it has also been hidden since Vue CLI3);

If we want to see the configuration information of webpack, what should we do?

• We can execute a script in a package.json file: "eject": "react-scripts eject"
• This operation is irreversible, so we will be prompted during the execution;

yarn eject

13. Webpack in Scaffolding

14. File structure deletion

After creating the project through scaffolding, many students still feel that the directory structure is too complicated, so I plan to lead everyone to write code from scratch.
Let's first delete all unnecessary files:

Delete all files under src. Delete all files except favicon.ico and index.html under public.

15. Start writing code

In the src directory, create an index.js file, because this is the entry point for webpack packaging.
Start writing React code in index.js:

We will find that the logic of the code is consistent with what we wrote; it’s just that in modular development, we need to manually import React and ReactDOM because they are in the modules we installed;

If we don't want to write too much code directly in ReactDOM.render, we can extract a component App.js separately:

This is the end of this article about learning how to build React scaffolding. For more relevant React scaffolding content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!