This is the 25th day of my participation in the August Challenge

📢 Hello everyone, I am Xiao Cheng, a prospective sophomore front-end enthusiast

📢 This article is a study note for learning React scaffolding

📢 Thank you very much for reading

📢 May you be true to yourself and love life

Introduction to the

This article focuses on scaffolding in React to address several issues

Soul three asks: What is it? Why is that? How to do?

  1. What is scaffolding?
  2. Why scaffolding?
  3. How to use scaffolding?

🍕 1. What is React scaffolding?

In our real life, the most common use of scaffolding is in the site, it is to ensure the smooth and convenient construction and build scaffolding on the site can help workers to complete the work, at the same time after the completion of the building construction, the removal of scaffolding will not have any impact.

In our React project, scaffolding was used in a similar way

React scaffolding is actually a tool to help us quickly generate the engineering structure of the project. The structure of each project is basically the same, so React scaffolding was built in advance for me. This is one of the strengths of scaffolding and the best way to create SPA applications with React

🍔 2. Why scaffolding?

In the previous introduction, we also have a certain understanding that scaffolding can help us build a project structure quickly

When I was learning Webpack, I needed to configure the webpack.config.js file every time to configure the relevant loader and plugin of our project. These operations were complicated, but they were very repetitive and necessary for project packaging. The React scaffolding does this for us. It doesn’t require us to write webPack configuration files manually, it has them all configured in advance.

My guess is that you can just type in one line of command.

I haven’t learned anything yet. This article mainly talks about the project directory structure and installation of scaffolding

🍟 3. How to use React scaffolding?

This is also the focus of this article. How to install the React scaffolding and understand its related files

How to install scaffolding first

1. Install the React scaffolding

First, make sure you have NPM and Node installed, and that the version is not too old

Then open CMD command line tool and install create-react-app globally

npm i create-react-app -g
Copy the code

You can then create a new folder for your projects

Execute in the current folder

create-react-app hello-react
Copy the code

Quick Build project

Execute it in the generated Hello – React folder

npm start
Copy the code

Start the project

So what do these files do

2. Scaffolding project structure

├─ public // Public Resources │ ├─ Favicon. Ico │ ├─ at the top of the browser │ ├─ Flag School - Logo512. PNG // │ ├─ Manifest.json // Packer application configuration file │ └ ─ robots. TXT file / / crawler to agreement ├ ─ SRC / / source folder │ ├ ─ App. The CSS / / the style of the App component │ ├ ─ App. Js / / App component │ ├ ─ App. Test, js / / ├─ ├─ CSS // Style │ ├─ index.js // import file │ ├─ logo.svg // logo图 │ ├─ reportWebVitals.js // page performance analysis file │ ├─ ├─ ├.css // style │ ├─ index.js // import file │ ├─ logo.svg // Logo 图 ├ ─ yarn.lock setuptests. js // component unit test file ├ ─ yarn.lockCopy the code

Here’s what the code in the index.html file in the public directory means

<! 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"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Copy the code

This is all the code after removing the code comments

Line 5

Specify the path to the browser icon, using %PUBLIC_URL% because WebPack is configured and it stands for public folder

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Copy the code

Line 6

Used for mobile web page adaptation

<meta name="viewport" content="width=device-width, initial-scale=1" />
Copy the code

Line 7

Used to configure the top color of android mobile browser, compatibility is not good

<meta name="theme-color" content="# 000000" />
Copy the code

Line 8 to 11

Used to describe website information

<meta
	name="description"
    content="Web site created using create-react-app"
/>
Copy the code

Line 12

The iPhone Touch app icon

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
Copy the code

Line 13

Configuration file when applying the shell

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Copy the code

That’s all about React scaffolding, thanks for reading 💕