What are the react scaffoldings?

React scaffolding includes: 1. Create React App; 2. Next.js; 3. Gatsby; 4. nwb; 5. razzle; 6. Neutrino; 7. react-cli; 8. Rekit, etc.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

1. Understanding scaffolding

1.1. Complications of front-end engineering

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

• For example, how to organize and divide the directory structure;

• For example How to manage the mutual dependencies between files;

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

• For example, how to compress and package the project before release Project;

• Wait...

Modern front-end projects have become more and more complex:

• It is no longer as simple as introducing several css files into HTML, several written js files or third-party js files;

• For example, css may be used When writing preprocessors such as less and sass, we need to convert them into ordinary css before they can be parsed by the browser;

• For example, JavaScript code is no longer just written in a few files. Instead, it is composed of hundreds or thousands of files through modularization. We need to use modular technology to manage the interdependence between them;

• For example, if the project needs Relying on a lot of 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 more tools :

• Such as babel, webpack, gulp. Configure their conversion rules, packaging dependencies, hot updates, etc.;

• You will find that you will face a series of engineering problems before you start the project;

The emergence of scaffolding helps us solve this series of problems;

1.2. What is scaffolding?

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

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

• Each project has to be completed The effects are different, but their basic engineering structures are similar;

• Since they are similar, there is no need to build it from scratch every time. We can use some tools to help us produce basic Engineering template;

• Different projects can be developed on the basis of this template or make some simple modifications to the configuration;

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

Summary: Scaffolding allows the entire project from construction to development to deployment. The process becomes fast and convenient;

What are the scaffoldings for react

1. Officially recommended scaffolding (https://react.docschina.org/docs /create-a-new-react-app.html)

There are actually a lot of scaffolding for React, among which the officially recommended scaffolds are as follows:

• Create React App : If you are learning React or creating a new single-page application

• Next.js: If you are building a server-side rendered website with Node.js

• Gatsby: If you are building content-oriented static websites

• nwb: Toolkit for React applications, libraries, and other web npm modules

• razzle: Create server-rendered, universal JavaScript applications with no configuration

• Neutrino: Create and build modern JavaScript applications with zero initial configuration

2. Other scaffolding

• react-cli scaffolding

• Rekit scaffolding

[Related recommendations: Redis video tutorial]

The above is the detailed content of What are the react scaffoldings?. For more information, please follow other related articles on the PHP Chinese website!