The React to summarize

1. Build environment

By default, you all have a bit of front-end development experience, so Node is installed by yourself.

1.1 the scaffold

  • Official recommendation => create-react-app
// install
$ npm install -g create-react-app
Copy the code

1.2 the project

1.2.1 package. Json

// setting
"scripts": {
  "start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"
}
Copy the code

1.2.2 start

// start
$ npm run start
Copy the code

1.2.3 packaging

// start
$ npm run build
Copy the code

2. Project structure

|public
|----|favicon.ico
|----|index.html
|dist
|src 
|----|common
|    |pages
|    |statics
|    |----|img
|    |    |iconfont
|    |store
|    |----|index.js
|    |    |reducer.js
|    |    |actionTypes.js
|    |    |actionCreators.js
|    |App.js
|    |index.js
|package.json
|README.md
Copy the code

3. Import files

  • /src/index

  • Specifies the rendered file and the DOM node (document.getelementById (‘root’)) into which the rendered file is inserted.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

4. Render entry files

  • /src/App.js

  • Routing/global style/distribution store……

import React, { Component } from 'react';
import { GlobalStyle, RouteStyle } from "./style";
import { FontGlobal } from "./statics/iconfont/iconfont";
import { Provider } from "react-redux";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./pages/home";
import Detail from "./pages/detail";
import store from "./store"

class App extends Component {
  render() {
    const providerStyle = {
      width: "100%".height: "100%"
    };
    return (
      <Provider store={store}>
        <div style={providerStyle}>
          <GlobalStyle />
          <FontGlobal />
          <BrowserRouter>
            <RouteStyle>
              <Route path="/" exact component={Home} />
              <Route path="/detail" exact component={Detail} />
            </RouteStyle>
          </BrowserRouter>
        </div>
      </Provider>
    );
  }
}

export default App;
Copy the code

4.1 the routing

  • Dependency packages => react-router-dom

4.4.1 the install

$ npm i react-router-dom -S
Copy the code

4.1.2 the routing table

import { BrowserRouter, Route } from "react-router-dom";

<BrowserRouter>
  <Route path="/" exact component={Home} />
  <Route path="/detail" exact component={Detail} />
</BrowserRouter>
Copy the code

  • Exact Match path Exact match path.

  • Component indicates the current path to load the component.

4.1.3 Route Parameter Transmission

4.1.3.1 wildcard
  • Refresh page parameters are not lost, but ugly
// Route
<Route path='/path/:name'Component ={}/> // Link component <Link to="/path/xxx"> < / Link > / / take ginseng enclosing props. Match. Params. NameCopy the code
4.1.3.2 query
  • Good looking but missing parameters
// Route
<Route path='/path'Component ={}/> // Link component <Link to="{{ pathname: "/path", query: "queryValue}} "> < / Link > / / take ginseng enclosing props. The location. The queryCopy the code
4.1.3.3 state
  • With the query
// Route
<Route path='/path'Component ={}/> // Link component <Link to="{{ pathname: "/path", state: "stateValue}} "> < / Link > / / take ginseng enclosing props. The location. The stateCopy the code

4.1.4 Route Redirection

4.1.4.1 Link
<Line to="/path"></Link>
Copy the code
4.1.4.2 history. Push
this.props.history.push({ pathname:' /user'And... })Copy the code

4.2 style

  • Dependent package => Styled – Components

  • The label in the page with JS package into the style of components.

4.2.1 Global Styles

// 1. Export GlobalStyle import Styled, {createGlobalStyle} from"styled-components";

exportconst GlobalStyle = createGlobalStyle` html { width: 100%; height: 100%; } `; // add <Provider> <div style={providerStyle}> <GlobalStyle /> <FontGlobal /> <BrowserRouter> <RouteStyle> <Route path="/" exact component={Home} />
        <Route path="/detail" exact component={Detail} />
      </RouteStyle>
    </BrowserRouter>
  </div>
</Provider>
Copy the code

4.2.2 Local Styles

import styled from "styled-components";

export const Img = styled.img.attrs({
  src: xxx
})` width: 100px; height: 100px; `;

// Import to use
<Img/>
Copy the code

4.3 distributed store

import { Provicer } from "react-redux";
import store from "./store"</Provicer store={store}>Copy the code

4.3.1 Intra-component Reception

import { connect } "react-redux";

class Header extends Component {
  render() {
    return( <div onClick={this.props.handleDispach}>Hello</div> this.props.login ? <div>Logout</div> : <div>Login</div>)}} const mapStateToProps = (state) => ({// map the Login: state.get("login")}); const mapDispatchToProps = (dispatch) => {return{// Accept methods mounted on propshandleDispach() { // TODO dispatch(action); }}};export default connect(mapStateToProps, mapDispatchToProps)(Heacer);
Copy the code

5. redux

  • Dependent packages => redux/react-redux/redux-thunk/immutable/redux-immutable

5.1 redux

  • Used to build the Store instance
import { createStore ,applyMiddleware, compose } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;
Copy the code

5.2 the react – story

  • It is used to distribute stores, map state data in pages, etc.

  • As above 4.3.

5.3 story – thunk

  • Use Thunk with middleware that uses Redux.

  • Use to return a function in actionCreator. Js.

  • Processing of asynchronous data.

// 1. Common data
export const handleSwitchList = (value) = > ({
  type: actionTypes.SWITCH_LIST,
  value
});

// 2. Asynchronous data = provides the Dispatch method to pass the action to the page for the user to invoke.
// mapDispatchToProps(Dispatch) will send an action.
export const handleRecommendList = (a)= > {
  return (dispatch) = > {
    axios.get("/api/recommendList.json").then(res= > {
      res = res.data.data;
      dispatch(handleRecomList(res));
    }).catch(err= > {
      throw Error(err); })}};Copy the code

5.4 immutable

  • Used to make data structures immutable, forcing changes will report errors.
// reducer.js
import { fromJS } from "immutable";

const defaultState = fromJS({
  value: xxxx
}) 

export default (state, action) => {
  if (action.type ==="xxx") {
    return state.set("value", state.get("value")); }}Copy the code

5.5 story – immutable

  • Merge multiple reducers.
import { combineReducers } from "redux-immutable";
import { reducer as headerReducer } from ".. /common/header/store";
import { reducer as homeReducer } from ".. /pages/home/store";
import { reducer as loginReducer} from ".. /pages/login/store";

export default combineReducers({
  header: headerReducer,
  home: homeReducer,
  login: loginReducer
})
Copy the code

6. The animation

  • Dependency package => react-transition-group

  • On the specific lot

7. Life cycle functions

  • website