Come and join us!

“The Newbies of Little Wo Shan” provides front-end developers with technical information and a series of basic articles. For a better user experience, please go to xhs-rookies.com/ to learn the latest articles.

“Code Tailor “, if you are interested in our article, or would like to make some suggestions, please follow the official account of “Rookie of Xiaohe Mountain” on wechat and contact us. You can also view our article on wechat. Every suggestion or approval is a great encouragement to us!

preface

In this section, we will show you how to create a React project and write content using the React scaffolding, instead of writing React code in HTML like Hello React.

This article introduces you to the following:

  • Complexity of front-end engineering
  • What is a scaffold?
  • How to build aReactThe scaffold
  • Scaffolding directory structure
  • How do I write my own code on scaffolding

Complexity of front-end engineering

As front-end project development becomes more complex, we need to start thinking about a number of issues, such as:

  • How is the directory structure of the project divided
  • How do I manage file dependencies
  • How do I manage third-party library dependencies
  • How do I compress projects at release time, reduce transport sizes, and obfuscate variable names

Today’s front-end projects have become very complex, we can’t simply use script tags to introduce a large number of third-party libraries, we can’t use less or sass preprocessors to better write CSS, and we can’t manage third-party library versions and dependencies well

To solve these problems, we may need to learn some package management tools, packaging tools such as Babel, Webpack, NPM, etc. Configure transformation rules, packaging dependencies, and hot updates.

However, this is not friendly to some beginners. You are forced to learn a lot of assistive tools before you have even started to learn everything, and they are not easy to configure.

Scaffolding is a handy tool to help us solve all of these problems.

What is a scaffold?

In real life, scaffolding is to ensure the smooth construction process and set up the work platform. Work can be done conveniently on scaffolding before construction is completed, and can be removed directly after construction without any relevance to the construction. The React scaffolding is similar to this.

The scaffolding mentioned in the programming is actually a tool to help us quickly generate the engineering structure of the project. Each project has a different effect but the project structure is roughly the same, so there’s no need to do the same work every time. Scaffolding provides a comfortable environment to learn React and is the best way to create new single-page applications with 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 production.

How to build React scaffolding

First you need to make sure that you have Node >= 8.10 and NPM >= 5.6 installed. See Front-end Environment Setup for details

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
Copy the code

Note: the NPX in the first line is not a typo — it is the package runtime tool that comes with NPM 5.2+.

Here themy-appIs the name of the project, can be replaced, but can not appear Chinese and capital letters. After the creation is complete, a name namedmy-appAfter entering this folder, executenpm startYou can run the project.

Scaffolding directory structure

My-app ├─ ├─ Package. json // │ ├─ public │ ├─ Favicon. Ico │ ├─ index.html │ ├─ favicon │ ├─ ├─ manifest.json // │ ├─ Manifest.json // │ ├─ manifest.json // And Web app configuration related │ └ ─ robots. TXT / / search engine which can or can't crawl specified file ├ ─ SRC / / basic all develop in this folder │ ├ ─ app. The CSS / / the style of the app component related │ ├ ─ app. Js / / │ ├─ Index.js │ ├─ index.js │ ├─ logo.svg │ ├─ logo.svg │ ├─ index.js │ ├─ index.css │ ├─ index.js │ ├─ logo.svg │ ├─ logo.svg I just started the project, │ ├─ ├─ ├─ node_modules │ ├─ ├─ ├─ serviceworker.js │ ├─ setuptest.js │ ├─ node_modules │ ├─ ├─ Yarn. lock // Depends on locally downloaded version management filesCopy the code

Package management tool

As we mentioned earlier, one of the functions of scaffolding is to help 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 at the front end: NPM and YARN. Let’s start with NPM.

npm

NPM, which stands for Node Package Manager, is a Package management tool for Node that is automatically installed when you install the Node environment.

What NPM does is help us manage the dependencies toolkit. It records the dependencies you need and the version number you need in package.json, so you don’t need to transfer node_modules repeatedly each time. Just use NPM install to install the dependency at the time of use.

yarn

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

Because early NPM had many defects, such as slow dependency installation and version confusion, these companies jointly launched YARN to solve these problems.

Now that NPM has solved many of the problems since version 5.0, the two are not particularly distinct. React scaffolding is managed using YARN by default, so we recommend that you use YARN for dependency management.

Commonly used instructions

function npm yarn
Install dependencies npm install yarn
New rely on npm install react yarn add react
Unload rely on npm uninstall react yarn remove react
Execute the command npm run serve yarn serve

How do I write my own code on scaffolding

First we need to know the scaffolding rendering process, the first render is public/index.html and execute SRC /index.js. SRC /index.js will then import the app component from the SRC /app.js file and mount it to public/index.html. So any changes to the page need to be made in the SRC /app.js file.

I changed the SRC /app.js file to look like this:

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super(a)this.state = {
      message: 'hello,XHS',}}render() {
    return (
      <div className="App">
        <h2> {this.state.message}</h2>
      </div>)}}export default App
Copy the code

The yarn start command has the following effect:

Great, so you can write your own React code in the React scaffolding, and when you modify the code and save it, the scaffolding will automatically update it for you, so you don’t have to refresh the page manually.

Next day forecast

In the next section, we’ll talk about the idea of componentization that takes up half of the front end, why it’s needed, what it is, and how it works in React. Stay tuned!