React series three: React scaffolding

join us!

160d3e72c2acaf " , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (160d3e72c2acb8 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Preface

In this section, we will introduce how to create a React project and write content React scaffolding, instead of writing React code in html Hello React

This article will introduce you to the following:

• The complexity of front-end engineering
• What is scaffolding
• How to build a React scaffold
• Directory structure of scaffolding
• How to write your own code on scaffolding

The complexity of front-end engineering

As the development of front-end projects becomes more and more complex, we need to start to consider many issues, such as:

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

Today's front-end projects have become very complicated. We cannot simply use the script tag to introduce a large number of third-party libraries, and we cannot use sass such as less or css to better write 060d3e72c2b0a2, which cannot be managed well. The version and dependencies of the third party library

In order to solve these problems, we may need to learn some package management tools, packaging tools such as: babel , webpack , npm etc. Configure conversion rules, package dependencies, and hot update functions.

But this is not friendly for some beginners. You are forced to learn many auxiliary tools before you start learning all kinds of knowledge, and their configuration is not that simple.

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

What is scaffolding

In real life, scaffolding is a working platform erected to ensure the smooth progress of various construction processes. You can easily work on the scaffold before the construction is completed, and it can be dismantled directly after the construction without any connection to the construction. React scaffolding we mentioned has similarities with this.

The scaffold mentioned in programming is actually a tool that helps us quickly generate the engineering structure of the project. The effect of each project is different but the project structure is roughly the same, so there is no need to repeat the work every time. Scaffolding provides a React , and is also the best way to create a new single-page application React

It will configure your development environment so that you can use the latest JavaScript features, provide a good development experience, and optimize your application for the production environment.

How to build a React scaffolding

First, you need to make sure that you have installed Node >= 8.10 and npm >= 5.6 . For detailed environment Front-end Environment

Then open the command line in the folder where the project needs to be created, and execute

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

Note: The first line of 160d3e72c2b27a is not a spelling mistake-it is the package running tool that comes with npm 5.2+.

The my-app here is the name of the project, you can replace it yourself, but Chinese and capital letters cannot appear. After the creation is complete, a my-app will be created. After entering this folder, execute npm start to run the project.

Directory structure of scaffolding

my-app
├─ README.md // readme说明文档
├─ package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖包、以及项目的启动、打包等等（node管理项目必备文件）
├─ public
│    ├─ favicon.ico // 应用程序顶部的icon图标
│    ├─ index.html // 应用的index.html入口文件
│    ├─ logo192.png // 被在manifest.json中使用
│    ├─ logo512.png // 被在manifest.json中使用
│    ├─ manifest.json // 和Web app配置相关
│    └─ robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
├─ src // 基本所有开发都在这个文件夹中进行
│    ├─ App.css // App组件相关的样式
│    ├─ App.js // App组件的代码文件
│    ├─ App.test.js // App组件的测试代码文件
│    ├─ index.css // 全局的样式文件
│    ├─ index.js // 整个应用程序的入口文件
│    ├─ logo.svg // 刚才启动项目，所看到的React图标
│    ├─ serviceWorker.js // 默认帮助我们写好的注册PWA相关的代码
│    └─ setupTests.js // 测试初始化文件
├─ node_modules // 所有依赖安装文件夹
└─ yarn.lock // 依赖本地下载版本管理文件

Package management tool

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

There are two package management tools available on the front end, one is npm and the other is yarn . We first introduce npm .

npm

npm full name is Node Package Manager , is node package management tool that you install node environment has been automatically installed.

npm is to help us manage the dependency toolkit. It will record the dependencies you need and the version numbers you need in package.json , so you don't need to transfer node_modules repeatedly every time you transfer, you only need to use npm install Install the dependencies and you are ready to use.

yarn

Yarn is a new JS package management tool Facebook , Google , Exponent and Tilde

Because the early npm had many defects, such as slow installation dependencies and chaotic versions, these companies jointly launched yarn to solve these problems.

Now npm has solved many problems after the release of version 5.0, and there is no obvious difference between the two. However, React scaffolding uses yarn for management by default, so we recommend that you use yarn for dependency management.

Common instructions

Features	npm	yarn
Installation dependencies	npm install	yarn
Add dependency	npm install react	yarn add react
Uninstall dependencies	npm uninstall react	yarn remove react
Excuting an order	npm run serve	yarn serve

How to write your own code on scaffolding

First of all, we need to know the rendering process of the scaffolding. The first to be rendered is the public/index.html file and execute the src/index.js file. Then src/index.js will import the App component from the src/app.js file and mount it on public/index.html . Therefore, if we want to modify the page, we need to modify it in the src/app.js file.

I src/app.js file 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 the yarn start as follows:

Very good, so you can write your own React React scaffolding, and when you modify the code and save it, the scaffolding will automatically help you perform hot updates, so you don't need to refresh the webpage manually.

Preview of the next section

In the next section we will talk about a componentization idea that occupies half of the front end, why componentization is needed, what is componentization, etc., and the componentization React Stay tuned!