styled-components

The document

styled-components.com/

The installation

npm install --save styled-components
Copy the code

CreateGlobalStyle Sets the global style

For styled- Components V4.0, the way to define global styles is different from before

Js import {createGlobalStyle} from'styled-components'
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #eee;
  }
`
exportDefault GlobalStyle // Introduce global styles in the project entry file import React from'react'
import ReactDOM from 'react-dom'
import GlobalStyle from './style.js'
import App from './App'
const Wrapper  = (
  <React.Fragment>
    <GlobalStyle />
    <App />
  </React.Fragment>
)
ReactDOM.render(Wrapper, document.getElementById('root'))
Copy the code

Styled Sets the style of the component

style.js

import styled from 'styled-components'// Set the styleexport const HeaderWrapper = styled.div`
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;'// Sets the label propertiesexport const HeaderLogo = styled.a.attrs({
  href: '/'
})`
  color: #0ea86a;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 24px;
`
Copy the code

The business component

import React from 'react'
import { HeaderWrapper } from './style'
class Header extends React.Component {
  render () {
    return(<HeaderWrapper> this is a header</HeaderWrapper>)}}export default Header
Copy the code

Receive parameters from the business component

// style.js
import styled from 'styled-components'
exports const Item = styled.div`
    background: url(${(props) => props.imgUrl})
`

// index.js
import React from 'react'
import { Item } from './style'
class Home extends React.Component {
    render () {
        return (
            <Item imgUrl="https://cdn.baidu.com"></Item>
        )
    }
}
Copy the code

Ant-Design

The document

ant.design/

The installation

npm install antd --save
Copy the code

Setting global Styles

Document ant. The design/docs/react /…

Install the necessary packages

npm install react-app-rewired customize-cra -D
npm install less less-loader babel-plugin-import -D
Copy the code

Create config-overrides. Js in the root directory

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true, // Style configuration is written here modifyVars: {'@primary-color': '#1DA57A'}}))Copy the code

Use on the page

// src/App.js
import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';
class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button> </div> ); }}export default App;
Copy the code

react-transition-group

The document

Github.com/reactjs/rea…

The installation

npm install react-transition-group --save
Copy the code

react-redux

The installation

npm install react-redux --save
Copy the code

The Provider component

The Provider provides the Redux store to all components of the Provider.

import { Provider } from 'react-redux';
import store from './store';
import ReactRedux from './ReactRedux'; Const App = (<Provider store={store}> <ReactRedux />, </Provider> ) ReactDOM.render(App, document.getElementById('root'));
Copy the code

connect()

Connect a service component to a Store. The service component must reside under the Provider component

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
class ReactRedux extends Component {
  constructor (props) {
    super(props)
  }
  render () {
    return (
      <Fragment>
        <div>
          <input placeholder="What do you want to do next?"value={this.props.inputValue} onChange={this.props.changeInputValue}/> <button </button> </div> <ul> {this.props. List.map ((item, index) => (<li key={index} onClick={() => {returnThis. Props. HandleItemDelete (index)}} > {item} < / li >)} < / ul > < / fragments >)}} / / will Redux store mounted to the props const mapStateToProps = (state) => {return{ inputValue: state.inputValue, list: // Mount Redux dispatch to props const mapDispatchToProps = (dispatch) => {return {
    changeInputValue (e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    },
    handleClick () {
      const action = {
        type: 'add_list_item'
      }
      dispatch(action)
    },
    handleItemDelete (itemIndex) {
      const action = {
        type: 'delete_list_item',
        itemIndex
      }
      dispatch(action)
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ReactRedux);
Copy the code

redux-devtools-extension

Redux browser debugging plug-in

The document

Github.com/zalmoxisus/…

immutable-js && redux-immutable

The document

Github.com/immutable-j…

The installation

npm install immutable --save
Copy the code

fromJS()

Convert js objects to IMmutable objects

import { fromJS } from 'immutable'
const defaultState = fromJS({
  focused: false
})
// immutable gets attributes
defaultState.get('focused')
Copy the code

immutableObj.get()

Immutable gets attributes

immutableObj.get('focused')
Copy the code

immutableObj.set()

Immutableobj.set () will combine the previous immutableObj value with the set value and return a brand new object. Old data is not modified directly, but is modified by returning new objects

immutableObj.set('focused'.true) // set the value immutableCopy the code

[Important] Obtain IMmutable data by request

When using Ajax to fetch data and set it to IMmutable, it is important to note that ajax is used to fetch ordinary JS objects, such as arrays. When an empty array is initialized by imMUTABLE, an array is already converted to imMUTABLE, so we need to set the value from fromJS() to an IMmutable data type, and then assign the value.

export const setSearchInfo = (data) => ({
  type: actionTypes.SET_SEARCH_INFO,
  data: fromJS(data)
})
Copy the code

redux-immutable

Combine redux with immutable

The installation

npm install redux-immutable --save
Copy the code

Configured in the store

- import { combineReducers } from 'redux'// Use redux + import {combineReducers} from'redux-immutable'Import {reducer as headerReducer} from'.. /common/header/store'// Store. State becomes an immutable object const reducer = combineReducers({header: headerReducer})export default reducer
Copy the code

Use on the page

state.get('header').get('focused'// state. GetIn ([);'header'.'focused'] // Fetch attributes by immutableCopy the code

redux-thunk

The document

Github.com/reduxjs/red…

The installation

npm install redux-thunk --save
Copy the code

Configuration in Store

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer'; // https://github.com/zalmoxisus/redux-devtools-extension const middlewareList = [thunk] const composeEnhancers = typeof  window ==='object'&& window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose; const enhancer = composeEnhancers(applyMiddleware(... middlewareList)); const store = createStore(reducer, enhancer); // dmapTools is a tool that needs to be saved. // DmapTools is a tool that needs to be saved.export default store;
Copy the code

Without redux-thunk, an action returns an object. With redux-thunk, an action can return a function configured in actionCreator

import { INIT_STORE_DATA } from './actionTypes';
export const getInitStoreData = (data) => ({
  type: INIT_STORE_DATA, data }); // When a function is returned using redux-thunk, the function can receive the store's dispatch method as an argumentexport const getTodoList = () => {
    return (dispatch) => {
        axios.get('/api/todolist').then((res) => { const data = res.data; const action = getInitStoreData(data); dispatch(action); }); }}Copy the code

Used in components

import { getTodoList } from './store/actionCreator';
componentDidMount () {
    const action = getTodoList();
    store.dispatch(action);
}
Copy the code

Axios

The document

www.kancloud.cn/yunye/axios…

The installation

npm install axios --save
Copy the code

React-router-dom

The installation

npm install react-router-dom --save
Copy the code

Simple to use

import { BrowserRouter, Route } from 'react-router-dom'// exact means that the exact path must be the same to display const App = () => {return (
  <React.Fragment>
    <BrowserRouter>
      <Route path='/'Exact render={() => (<div>Home Page</div>)}></Route> // detail/123456 <Route path='/detail/:id' exact component={Detail}></Route>
    </BrowserRouter>
  </React.Fragment>
  )
}
export default App
Copy the code

Single-page application skipping and parameter obtaining

The first kind of

Routing setting

import { BrowserRouter, Route } from 'react-router-dom'<BrowserRouter> // Access path: /detail/123456 <Route path='/detail/:id' exact component={Detail}></Route>
</BrowserRouter>
Copy the code

Jump to set

import { Link } from 'react-router-dom'
render () {
    return<div> // Dynamic routing <Link to={'/detail/'+ this. State. Id} > < div > jump to details < / div > < / Link > < / div >)}Copy the code

Destination route obtains parameters

this.props.match.params.id
Copy the code

The second,

Routing setting

import { BrowserRouter, Route } from 'react-router-dom'<BrowserRouter> // Access path: /detail? id=123456 <Route path='/detail' exact component={Detail}></Route>
</BrowserRouter>
Copy the code

Jump to set

import { Link } from 'react-router-dom'
render () {
    return<div> // Dynamic routing <Link to={'/detail? id='+ this. State. Id} > < div > jump to details < / div > < / Link > < / div >)}Copy the code

Destination route obtains parameters

this.props.location.search
Copy the code

react-infinite-scroller

Scroll the autoload list

The document

Github.com/CassetteRoc…

The installation

npm install react-infinite-scroller --save
Copy the code

react-virtualized

Combined with React and Virtualized, the mode of rolling and loading an infinite long list improves the performance of a long list when there is a lot of data virtualized.

Virtualized is a type of technology that is applied to big-data scenarios to reduce unnecessary rendering on invisible areas and improve performance, especially if the data type is thousands of matches

The document

Github.com/bvaughn/rea…

The installation

npm install react-virtualized --save
Copy the code

React-loadable

Used to load components dynamically

The document

Github.com/jamiebuilds…

The installation

npm install react-loadable --save
Copy the code

Simple to use

Create loadable.js in the page component directory

// use react-loadable import react from'react'
import Loadable from 'react-loadable'
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./index'), // Components that need to load asynchronouslyloading () {
    return<div> loading... </div> } })export default <LoadableComponent />
Copy the code

Used in the routing file to import loadable.js of the ** component instead of index.js of the previously imported component

import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom'

import store from './store'
import Home from './pages/home'
import Detail from './pages/detail/loadable'// Provide the Redux store to all components of the Provider const App = () => {return (
    <Provider store={store}>
      <BrowserRouter>
        <Route path='/' exact component={Home}></Route>
        <Route path='/detail/:id' exact component={Detail}></Route>
        <Bottom />
      </BrowserRouter>
    </Provider>
  )
}
export default App
Copy the code

In a page, if you want to use routed parameters, use withRouter()

import React from 'react'
import { withRouter } from 'react-router-dom'
class Detail extends React.Component {
    constructor (props) {
        super(props)
    }
    render () {
        return (
            <div>{this.props.match.params.id}</div>
        )
    }
}
export default withRouter(Detail)
Copy the code

Lodash

The document

www.lodashjs.com/

Object/array depth comparison

_. IsEqual (nextProps. List, this.props. ListCopy the code