This is the 8th day of my participation in the August Text Challenge.More challenges in August

What is scaffolding?

  • Traditional scaffolding refers to an architectural structure: a temporary frame erected when a building or structure is put up
  • The scaffolding mentioned in the programming is actually a tool to help us quickly generate the engineering structure of the project
    • Each project produces different results, but the basic engineering results are similar
  • Conclusion: Scaffolding makes the entire process from construction to development to deployment fast and convenient

Front end scaffolding

  • Each of the three popular frames has its own scaffolding
    • Vue scaffolding: Vue – CLI
    • React scaffolding: create-react-app
    • Angular scaffolding: Angular-CLI
  • Rely on
    • The Node environment must be installed on your computer

Erection of scaffolding

`npm install -g create-react-app`
Copy the code
  • Create the React projectCreate-react-app project name

Directory structure analysis

  • Readme.md // Documentation
  • Package. json // Configuration file
  • public
    • Favicon.ico // Top icon icon
    • Index.html // The application’s index.html entry file
    • Logo192. PNG //manifest.json
    • Logo512.png //manifest.json
    • Manifest.json // is related to web app configuration
    • Robots.txt // specify which files the collector can or cannot crawl

– src-app. CSS // Style related to App components – app.js // Code file of App components – app.test.js // Test file of App components – idnex.js // Global style file – logo.svg // Icon seen in startup – Serviceworker.js // The default helps us to write the code for registering PWA – setuotests.js // the test initialization file -yarn.lock

What is PWA?

  • Directory structures are all well understood, but what is a PWA?
    • PWA stands for Progressive Web App, or Progressive Web application
    • A PWA application is first and foremost a Web page, and a Web application can be written using Web technology
    • Then add App Manifest and Service Worker to realize PWA installation and offline functions
    • This form of Web existence is also called a Web App
  • Problems solved by PWA
    • Realize the offline cache function, even if the user’s mobile phone does not have the network, still can use some offline functions
    • Message push is implemented
    • , etc.

Writing scaffolding

Current directory structure

SRC -> index.js you’ll find the same JSX code as before, but with the react and reactDOM references manually

import react from 'react'
import reactDom from 'react-dom'

reactDom.render(<h2>hello react</h2>.document.getElementById("root"))
Copy the code

But we wrote everything in reactdom.render (), and the code was pretty messy, so we created an app.js component

import React, { PureComponent } from 'react'    // The shortcut RPC creates a class component

export default class App extends PureComponent {
    render() {
        return (
            <div>
                App
            </div>)}}Copy the code
import react from 'react'
import reactDom from 'react-dom'

import App from './App'

reactDom.render(<App/>.document.getElementById("root"))
Copy the code