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 ... )