Rapid construction of react development environment with Create-react-app Scaffold in Webstorm __web

use Facebook's create-react-app scaffolding to quickly build a react development environment (Ant.design,redux ...). )

The "scaffolding" in the programming field refers to a kind of tool that can quickly build a "skeleton" of the project scaffolding. For example, most react projects have src,public,webpack profiles, and so on, and the SRC directory contains components directories, and so on. Each time you create a new project, these fixed file directories are created manually. The role of scaffolding is to help you accomplish these repetitive tasks, including one-click generation of the main directory structure, installation dependencies, and so on.

Create-react-app is a 0-configuration command-line tool scaffold from Facebook that can help you automatically create the easiest react project template based on WEBPACK+ES6.

1: Start a new project in Webstorm

2: If not the latest version of NPM, install the latest version of NPM

NPM Install Npm@latest

3: Related configurations commonly used in installation projects

Yarn Add React-redux redux redux-thunk react-router-dom thunk Babel-plugin-transform-decorators-legacy browser-cookies babel-plugin-import Utility Body-parser Cookie-parser-- Save

React-redux map State to sub component distribution reducer

Redux Create reducer Action store, etc.

React-thunk thunk processing sends the request asynchronously.

React-router-dom used to create routes

Antd-mobile@next the latest version of the Antd-mobile template phone with the assumption that if you do a response-type installation react-responsive Ant-design@next is the PC side Ant-pro@next is the ipad side

The babel-plugin-transform-decorators-legacy syntax conversion can also be used to convert the class attribute in the view layer with a function name followed by @

Browser-cookies client GET, set cookie

Babel-plugin-import Load on Demand

Utility login to sign up for MD5 encryption. Set UUID and so on

Body-parser reads the data sent by the front end Cookie-parser is used for server-side settings cookies (items that are pure front end without background these two can not be installed)

Installing: prop-types (Verifying the type of props properties)

Yarn Add prop-types-d

(Yarn under--save-dev can be-D--save can be-s)

Install React-helmet Support single page application for SEO friendliness

Installation method Usage Address: Yarn Add React-helmet or npm install--save React-helmet

Https://www.npmjs.com/package/react-helmet

4: After the installation is complete. Eject Configuration entry

NPM Run eject pop-up configuration file, you can customize the configuration Webpack

After completion, you can view the related configuration in Package.json

Babel-plugin-transform-decorators-legacy and Babel-plugin-import Plug-ins configured Babel in 5:package.json

Methods: Modify the Babel and presets levels in Package.json

Add to:

"Plugins": [

[

"Import",

{

"LibraryName": "Antd-mobile",

"Style": "CSS"

}

],

"Transform-decorators-legacy"

]

6: Set the background port reverse proxy. Process Cross-domain Requests

"Proxy": "Tapi.12yuwen.com"

If multiple groups can be set "proxy": ["tapi.12yuwen.com", "tapia.12yuwena.com"]

7: Basic configuration Complete, startup project: Yarn Start (first) or NPM start

8: Create the project directory

Create action in Actions redux

Components create Puppet components (pure display does not involve data interaction)

Config is some basic configuration. Interface name and so on

There are some constants in the Constants.

Containers Intelligent components handle data and business tiers. Passing properties to the view layer and so on

Fetch is send request

Reducer Redux The reducer of each child.

Router Create routes

Store stores the corresponding state in the Redux

Uil (may not.) Processing of public data)

9:index.js Start first screen app.js

10:componets the corresponding routing page in the following figure.

Basic in each page: syntax

import React from 'react'
export  default class Index extends React.Component {

    constructor(props, context) {
        super(props, context);
    }
    render() {
        return (
            <div>
                <h1>index页面</h1>
            </div>
        )
    }
}

11: Want to use antd-mobile in the project first introduce css in index.js

import 'antd-mobile / dist / antd-mobile.min.css'


Load the desired components on demand according to https://mobile.ant.design/components/tabs-cn/



12: Configure routing address

The index in App.js and Componets refers to the homepage

Webstorm uses create-react-app scaffolding to quickly build a React development environment

Want to remove only one index

Webstorm uses create-react-app scaffolding to quickly build a React development environment

The configuration route can be rewritten in ant-design. For example: click to jump to the page

Webstorm uses create-react-app scaffolding to quickly build a React development environment

Webstorm uses create-react-app scaffolding to quickly build a React development environment

If it is printed as undefined. It is as follows: withRouter is introduced

Note: @withRouter

Webstorm uses create-react-app scaffolding to quickly build a React development environment

Repeated click routing issues:

Webstorm uses create-react-app scaffolding to quickly build a React development environment

When introduced in the page properties should also have:

such as:

 Webstorm uses create-react-app scaffolding to quickly build a React development environment