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