React Series III: react scaffold

Time:2021-9-11

Come and join us!

“Rookies of Xiaohe mountain”, provide technology related information and a series of basic articles for front-end developers. For a better user experience, please move to our official website Xiaoheshan rookies( https://xhs-rookies.com/ )Study and get the latest articles in time.

“Code tailor”, if you are interested in our article or want to make some suggestions, please pay attention to wechat“Rookies of Xiaohe mountain”Official account, and contact with us, you can also read our articles on WeChat. Every suggestion or approval is a great encouragement to us!

preface

In this section, we will introduce how to passReactCreate a scaffoldReactProject and write content, not likeHello ReactIn that wayhtmlWritten inReactcode.

This article will introduce you to the following:

  • Complexity of front-end engineering
  • What is a scaffold
  • How to build aReactScaffolding
  • Directory structure of scaffold
  • How to write your own code on the scaffold

Complexity of front-end engineering

With the development of front-end projects becoming more and more complex, we need to start considering many problems, such as:

  • How to divide the directory structure of the project
  • How to manage interdependencies between files
  • How to manage dependencies on third-party libraries
  • How to compress the project when publishing, reduce the transmission size and confuse variable names

Today’s front-end projects have become very complex, and we can’t simply use themscriptTag to introduce a large number of third-party libraries, which cannot be usedlessperhapssassWait for the preprocessor to correctcssBetter writing, can not well manage the versions and dependencies of third-party libraries

To solve these problems, we may need to learn some package management tools and packaging tools, such as:babelwebpacknpmWait. Configure conversion rules, packaging dependencies, and hot updates.

However, this is not friendly for some beginners. Before you start learning all kinds of knowledge, you are forced to learn many auxiliary tools, and their configuration is not so simple.

The appearance of scaffold is a very convenient tool to help us solve all the above problems.

What is a scaffold

In real life, scaffold is a working platform set up to ensure the smooth progress of each construction process. Before the completion of construction, it is convenient to work on the scaffold. After construction, it can be directly removed without any connection to the construction. And we mentionedReactScaffolding is similar to this.

The scaffold mentioned in programming is actually a tool to help us quickly generate the engineering structure of the project. The effect of each project is different, but its project structure is roughly the same, so it is not necessary to repeat the work every time. Scaffolding provides a learning opportunityReactThe comfortable environment is also usedReactThe best way to create a new single page application.

It will configure your development environment so that you can use the latestJavaScriptFeatures to provide a good development experience and optimize your application for the production environment.

How to build a react scaffold

First you need to make sure you installNode >= 8.10andnpm >= 5.6Please refer to front-end environment construction for detailed environment construction

Then open the command line in the folder where you want to create the project and execute

npx create-react-app my-app
cd my-app
npm start

be careful:NPX in the first line is not a spelling error — it’s the package runtime that comes with NPM 5.2 +.

Heremy-appIt is the name of the project, which can be replaced by itself, but Chinese and capital letters cannot appear. When the creation is complete, a file namedmy-appAfter entering this folder, executenpm startYou can run the project.React Series III: react scaffold

Directory structure of scaffold

React Series III: react scaffold

my-app
- readme. MD // readme documentation
1 - package. JSON // description of the entire application, including application name, version number, some dependent packages, project startup, packaging, etc. (node management project prerequisite files)
├─ public
│♪ - favicon.ico // icon at the top of the application
│♪ - index.html // the index.html entry file of the application
│♪ - logo192.png // used in manifest.json
│♪ - logo512.png // used in manifest.json
│♪ - manifest.json // related to web app configuration
│ └ - robots.txt // specify which files the search engine can or cannot crawl
- Src // basically, all development is carried out in this folder
│♪ - app.css // styles related to app components
│♪ - app.js // code file of APP component
│♪ - app.test.js // test code file of APP component
│♪ - index. CSS // global style file
│♪ - index.js // the entry file of the entire application
│♪ - logo. SVG // just started the project, the react icon you saw
│♪ - serviceworker. JS // help us write the code related to registering PWA by default
│ └ - setuptests. JS // test initialization file
├─ node_ Modules // all dependent installation folders
└ - yarn. Lock // depending on the locally downloaded version management file

Package management tools

As we mentioned before, one of the functions of scaffolding is to help us manage third-party dependencies. How can we manage third-party dependencies in our project? We use package management tools for unified management.

There are two package management tools in the front end. One isnpm, one isyarn。 Let’s introduce it firstnpm

npm

npmMy full name isNode Package Manager, yesnodePackage management tool, which you installnodeEnvironment has been automatically installed.

npmThe function of is to help us manage the dependency toolkit. It will record the dependency and version number you need in thepackage.jsonTherefore, there is no need to transmit repeatedly each timenode_modules, only need to be used when usingnpm installInstall the dependency and you can use it.

yarn

YarnByFacebookGoogleExponentandTildeJointly launched a newJSPackage management tools.

Because earlynpmThere are many defects, such as slow installation dependency and chaotic versions, so these companies jointly launchedyarnTo solve these problems.

nowadaysnpmAfter the launch of version 5.0, many problems have been solved, and there is no obvious difference between the two. howeverReactScaffold is used by defaultyarnFor management, so we suggest you useyarnPerform dependency management.

Common instructions

function npm yarn
Installation dependency npm install yarn
New dependency npm install react yarn add react
Unload dependency npm uninstall react yarn remove react
Execute command npm run serve yarn serve

How to write your own code on the scaffold

First of all, we need to know the rendering process of scaffold. What is rendered firstpublic/index.htmlFile and executesrc/index.jsFile. thensrc/index.jsWill fromsrc/app.jsImport from fileAppComponent and mount topublic/index.htmlCome on. So we need to modify the page insrc/app.jsModify in the file.

I willsrc/app.jsThe document is modified as follows:

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super()
    this.state = {
      message: 'hello,XHS',
    }
  }

  render() {
    return (
      <div className="App">
        <h2> {this.state.message}</h2>
      </div>
    )
  }
}

export default App

Then executeyarn startThe effects are as follows:

React Series III: react scaffold

Good, so you canReactWrite your own in the scaffoldReactThe code is, and when you modify the code and save it, the scaffold will automatically update it for you. You don’t need to refresh the web page manually.

Next section Preview

In the next section, we will talk about a component-based idea that accounts for half of the front-end, why component-based is needed, what is component-based, and so onReactComponentization in. Coming soon!