npm run eject

//引入react核心組件主庫
import React, { Component } from 'react'
//引入ReactDOM 子庫
import ReactDOM from 'react-dom'

npm i prop-types
//對接收的props進行：類型、必要性的限制
import PropTypes from 'prop-types'
npm i nanoid
//生成唯一標識 一般用來充當id或遍歷時的index
import {nanoid} from 'nanoid'
id:nanoid()

npm install pubsub-js --save
//消息訂閱-發(fā)布機制
import PubSub from 'pubsub-js'
npm install axios
//輕量級ajax請求庫
import axios from 'axios'

npm install --save react-router-dom
//路由庫，前端路由：value是component，用于展示頁面內容；
//      后端路由：value是function, 用來處理客戶端提交的請求。
import {BrowserRouter,HashRouter,NavLink,Link,Route} from 'react-router-dom'
// V5及之前的版本才有以下三個
import {Switch,Redirect,withRouter} from 'react-router-dom' 
// Switch:懶惰匹配  Redirect：重定向  withRouter：讓一般組件具備路由組件所特有的API
 
npm i -save-dev query-string
// 對http請求所帶的數(shù)據(jù)進行解析
import qs from 'querystring'  import qs from 'qs'
// qs.parse() 將字符串解析為對象
// qs.stringify() //將對象解析為字符串（urlencoded編碼）

//開源React UI組件庫
npm i antd
// 主庫
import { Button,DatePicker } from 'antd';
// 子庫 圖標等
import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
// const 要寫在 import后面
const { RangePicker } = DatePicker;
//按需引入 自定義主題步驟：
//1.安裝依賴
yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
//2.修改package.json
						"scripts": {
							"start": "react-app-rewired start",
							"build": "react-app-rewired build",
							"test": "react-app-rewired test",
							"eject": "react-scripts eject"
						},
 
//3.根目錄下創(chuàng)建config-overrides.js
					const { override, fixBabelImports,addLessLoader} = require('customize-cra');
					module.exports = override(
						fixBabelImports('import', {
							libraryName: 'antd',
							libraryDirectory: 'es',
							style: true,
						}),
						addLessLoader({
							lessOptions:{
								javascriptEnabled: true,
								modifyVars: { '@primary-color': 'green' },
							}
						}),
					);

// 一、基本redux  componnet==>一般組件Count  redux文件==>action、reducer、store.js
npm i redux
 
// redux異步action
npm i redux-thunk
 
// redux中，最為核心的store對象將state、action、reducer聯(lián)系在一起的對象
// 1.建立store.js文，引入createStore，專門用于創(chuàng)建store對象
//    引入redux-thunk，applyMiddleware，用于支持異步action
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
 
// 2.引入為Count組件服務的reducer
import countReducer from './count_reducer'
 
// 3. 語法：const store = createStore(reducer)
// store.js文件中一般如下：
export default createStore(countReducer,applyMiddleware(thunk))
 
// 4.store對象的功能
1)store.getState(): 得到state
2)store.dispatch({type:'INCREMENT', number}): 分發(fā)action, 觸發(fā)reducer調用, 產生新的state
3)store.subscribe(render): 注冊監(jiān)聽, 當產生了新的state時, 自動調用

// 二、react-redux  容器組件[UI(同名)組件] ： UI組件==>一般組件  containers組件==>外殼
npm i react-redux

//容器組件中，引入connect用于連接UI組件與redux
// Provider讓多個組件都可以得到store中state數(shù)據(jù)
import {connect,Provider} from 'react-redux'
//定義UI組件
class CountUI extends Component{...}
// 使用connect()()創(chuàng)建并暴露一個Count的容器組件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
<Count store={store} />
// 給容器組件傳遞store 連接外部的redux; connect()()用于連接內部的內部的UI組件
 
// 數(shù)據(jù)共享
 
// store.js匯總所有的reducer變?yōu)橐粋€總的reducer
import {combineReducers} from 'redux'
const allReducer = combineReducers({
	he:countReducer,
	rens:personReducer
})
// containers組件中：
connect(
	state => ({key:value}), //映射狀態(tài) mapStateToProps
           {key:xxxAction} //映射操作狀態(tài)的方法 mapDispatchToProps
        )(UI組件)
 
 
// redux開發(fā)者工具 chrome網上商店中搜索安裝 Redux Devtools 工具
npm i redux-devtools-extension
 
import {composeWithDevTools} from 'redux-devtools-extension'
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))