Shulou(Shulou.com)06/01 Report--

This article is about what react scaffolding is. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

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

one。 Recognize scaffolding

1.1. The complication of front-end engineering

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

For example, how to organize and divide the directory structure

For example, how to manage the interdependence between files

Such as how to manage the dependencies of third-party modules

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

Wait a minute.

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

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

For example, css may be written using less, sass and other preprocessors, and we need to convert them to ordinary css before they can be parsed by browsers.

For example, JavaScript code is no longer just written in a few files, but is composed in hundreds of files in a modular way. We need modular technology to manage the interdependence between them.

For example, the project needs to rely on a lot of third-party libraries, how to better manage them (such as managing their dependencies, version upgrades, etc.)

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

Such as babel, webpack, gulp. Configure their conversion rules, packaging dependencies, hot updates, and so on.

You will find that before you start working on a project, you are faced with a series of engineering problems.

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

1.2. What is scaffolding?

Traditional scaffolding refers to an architectural structure: a temporary frame built when building buildings or buildings.

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

The results of each project are different, but their basic engineering structures are similar.

Since it is similar, it is not necessary to build from scratch every time. We can use some tools to help us produce basic engineering templates.

For different projects, you can develop the project or make some simple configuration changes on the basis of this template.

This can also indirectly ensure the consistency of the basic structure of the project and facilitate later maintenance.

Conclusion: scaffolding makes the whole process fast and convenient from construction to development to deployment.

What are the react scaffolding?

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

React actually has a lot of scaffolding, of which the officially recommended scaffolding is as follows:

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

Next.js: if you are using Node.js to build a server-side rendered website

Gatsby: if you are building a static content-oriented website

Nwb: a toolkit for React applications, libraries, and other web npm modules

Razzle: create a generic JavaScript application rendered by a server that is not configured

Neutrino: create and build modern JavaScript applications with zero initial configuration

2. Other scaffolding

React-cli scaffolding

Rekit scaffolding

Thank you for reading! This is the end of this article on "what is react scaffolding". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.