Use Facebook's Create-react-app scaffolding to quickly build a react development environment (Ant.design,redux ... ）

Create-react-app is a 0 configuration command-line tool from Facebook that helps you automatically create WEBPACK+ES6-based react project templates

1: First create a new project in Webstorm

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

NPM Install NPM @latest

3: Related configurations commonly used in Setup projects

Yarn Add React-redux redux redux-thunk react-router-dom thunk [email protected] Babel-plugin-transform-decorators-legacy browser-cookies babel-plugin-import Utility Body-parser Cookie-parser–save

React-redux mapping State to sub-component distribution reducer

Redux Create reducer Action store, etc.

React-thunk Thunk handles sending requests asynchronously.

React-router-dom used to create a route

[Email protected] The latest version of the Antd-mobile template mobile phone use of the assumption that if you do a responsive installation react-responsive [email protected] is the PC side [email protected] is the ipad side

Babel-plugin-transform-decorators-legacy syntax conversion with the function name after @ can also be used to convert the class attribute in the view layer

Browser-cookies client GET, set cookie

Babel-plugin-import Load on Demand

Utility is used for MD5 encryption when login registration. Set UUID and so on

Body-parser reading data sent from the front end

Cookie-parser for server-side settings cookies

4: After the installation is complete. Popup Configuration Items

NPM Run Eject

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

Configuring Babel Babel-plugin-transform-decorators-legacy and Babel-plugin-import plugins in the 5:package.json

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

Add to:

"Plugins": [

[

"Import",

{

"LibraryName": "Antd-mobile",

"Style": "CSS"

}

],

"Transform-decorators-legacy"

]

6: Set background port reverse proxy. Processing cross-domain requests

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

If more than one can set the array "proxy": ["tapi.12yuwen.com", "tapia.12yuwena.com"]

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

8: Create a project directory

Actions created in action redux

Components to create a puppet component (pure presentation does not involve data interaction)

Config is some basic configuration. Interface Name, etc.

Constants are some constants.

Containers Smart components handle the data and business layers. Passing properties to the view layer, etc.

Fetch is the sending request

Reducer redux of each sub-Reducer merged together

Router Creating a route

Store stores the corresponding status in the Redux

Uil (Can not.) Handling of public data)

9:index.js start the first screen app.js

10:componets the corresponding routing page as in.

Basic in each page: syntax

 from ' react ' Export   default class Index extends React.component {    Constructor (props, context) {        Super (props, context);    }    Render () {        return  (            <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 component on demand according to the https://mobile.ant.design/components/tabs-cn/

Such as:

12: Configure the routing Address

Index in App.js and componets refers to the home page

Want to remove just leave an index

Configuration routing can be overridden by Ant-design for example: Click the Jump page

If you print it out as undefined. Will be like: to introduce Withrouter

Note: @withRouter

Repeat-click Routing issues:

The introduction of page properties should also include:

Like what:

Use Facebook's Create-react-app scaffolding to quickly build a react development environment (Ant.design,redux ... ）