react background project development (a)

1. Preparation of project development

1. Item Description
2. Technology Selection
3. api Interface (Part 4: 3 {URL request, the request mode, format parameter request}, in response to a data format) / interface document / test interface

2. Start project development

1. Create a project using scaffolding react
2. Development environment running: npm start
3. Packaging production run: npm run build serve build

3. git project management

1. Creating a remote repository
2. Create a local warehouse
   1.  Configuration .gitignore
   2.  　 git init
   3.  　 git add .
   4.   　git commit -m "init"
3. The local repository pushed to the remote repository
   1. 　　git remote add origin url
   2. 　　git push origin master
4. Create a dev branch locally, and pushed to the remote
   1. 　　gitcheckout -b dev
   2. 　　git push origin dev
5. If there are local modifications
   1. 　　git add.
   2. 　　git commit -m "xxx"
   3. 　　git push origin dev
6. At the same time new: Clone warehouse
   1. 　　git clone url
   2. 　　git checkout -b dev origin/dev
   3. 　　git pull origin dev
7. If the remote modification
   1. 　　git pull origin dev

4. Create the basic structure of the project

　　api: ajax request module

　　components: non-routing component

　　pages: grounds assembly

　　app.js: root component applications

　　index.js: Entrance js

The introduction antd

　　Download antd package (npm i antd -d)

　　Demand Packing: Packing only import component introduced js / css

　　　　　　Download Kit (npm i react-app-rewired customize-cra babel-plugin-import)

　　　　　　config-overrides.js

　　　　　　package.jason

　　Custom Theme

　　　　　　Download Kit (npm i less less-loader -d)

　　　　　　config-overrides.js

　　Use of components antd

　　　　　　According to a document prepared by antd

6. import routes

　　Download: react-router-dom　　

　　Split Application Route:

　　　　Login: Log

　　　　Admin: admin interface

　　Registration route:

　　　　<BrowserRouter> // router

　　　　<Switch> // switch wherein a route

　　　　<Route path = '' component = {} /> // Route

7. Login static components

1. Custom style layout part
2. Use antd component implementation login form interface
   1. 　　Form / Form.Item
   2. 　　Input
   3. 　　Icon
   4. 　　Button

8. The collection form data and forms the reception authentication

　　1. form objects

　　　　How to make components contain <Form> is obtained form the object?

WrapLoginForm = Form.create()(LoginForm)

　　　　WrapLoginForm is LoginForm parent component, it gives LoginForm incoming form properties, uses technology and higher-order components of higher-order functions

　　2. Operation Form Data

form.getFiledDecorator ( 'identification name', {initialValue: Initial value, rules: []}) (<Input />) packaging table item tag assembly
form.getFieldsValue (); to give the object contains all the input data
form.getFieldValue (id); obtained according to the identification data corresponding to the input field

　　3. Reception Form Validation

　　　　1. Declare real-time form validation

form.getFieldDecorator ( 'identification name', {rules: [{min: 4, message: 'error message'}]}) (<Input />)

　　　　2. Custom form validation　　　　　　

form.getFieldDecorator('标识名称',{rules:{validator:this.validatePwd}})(<Input/>)
　　　　　　validatePwd = (rule,value,callback)=>{

　　　　　　　　IF (problem) callback ( 'error') the else callback ()
　　　　　　}

　　　　3. Click unified verification tips　

form.validateFields ((error, values) => {
    IF (! error) {verified, send a request} ajax
})

 

9. The higher order components and higher-order functions　　

　　1. Higher-order functions

　　　　1) A particular class of function

　　　　　　a). a function that accepts a parameter of type

　　　　　　b). The return value is a function of the function

　　　　2) Common

　　　　　　a) Timer:. setTimeout () / setInterval ()

　　　　　　b).Promise:Promise(()=>{}) then(value=>{},reason=>{})

　　　　　　. C) associated array traversal methods: forEach () / filter () / map () / find () / findindex ()

　　　　　　d) .fn.bind () is a function itself, bind method returns a new function method

　　　　　　e) .Form.create () () create function package assembly capable of generating additional new feature function of a component

　　　　　　f).getFieldDecorator()()

　　　　3). Higher-order functions more dynamic, more scalable

　　2. The high-order components

　　　　1). Essentially a function

　　　　2) a receiving assembly (packaged assembly), and returns a new assembly (packaging assembly), the packaging assembly will be passed to the specific properties package assembly

　　　　Extension components: 3) action.

　　3. The high-order components are also higher-order function: to accept a component function that returns a new component function