React项目初始化

创建项目

$ npx create-react-app app01     // 创建指定名称的项目

启动项目

$ cd app01
$ npm start

项目降级

$ npm install --force react@17 react-dom@17 -S
//安装路由
$ npm install react-router-dom@5 -S //路由
//界面UI
$ npm install antd -S		// 直接使用
 	或者
$ yarn add antd   // 使用facebook的yarn包管理器添加依赖模块
//高级配置  安装一个独立的管理项目的配置模块:@craco/craco
$ npm i @craco/craco -S

编辑src/index.js文件，修改启动模块

import React from 'react';
// @18
// import ReactDOM from 'react-dom/client';
// @17
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// @18
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );

// @17
ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.querySelector("#root")
)

高级配置

安装一个独立的管理项目的配置模块:@craco/craco

 npm i @craco/craco -S

编辑package.json修改启动命令

"scripts": {
-   "start": "react-scripts start",			// 原有命令
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",							// 修改后命令
+   "build": "craco build",
+   "test": "craco test",
}

项目中添加配置文件app01/craco.config.js，启用less（css预处理语言）语法

$ npm i craco-less -S

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

修改：src/App.css，修改为src/App.less，内容修改如下：

@import '~antd/dist/antd.less';

修改：src/App.jsx组件，修改引入方式：

// import './App.css'
import './App.less'

阿里镜像

npm set registry http://registry.npmmirror.com

状态管理redux

npm i redux -S

解耦合

npm install react-redux -S

路由封装

router/RouterView.jsx`

import React, {Suspense} from 'react'
import { Spin } from 'antd'
import {
 Switch,
 Route,
 Redirect
} from 'react-router-dom'

export default function RouterView(props) {
 const { routes } = props
 return (<Suspense fallback={Spin}>
   <Switch>
     {
       routes.map(route => {
         if(route.redirect) {
           return <Route key={route.name}
                         path={route.path}
                         exact={route.exact}>
                     <Redirect to={route.redirect}/>
                   </Route>
         } else {
           return <Route key={route.name}
                         path={route.path}
                         render={props => {
                           return <route.component {...props} children={route.children}/>
                         }}></Route>
         }
       })
     }
   </Switch>
 </Suspense>)
}

axios封装

plugins/http.js

// 封装axios 
import axios from 'axios'
import {Component} from 'react'

const instance =axios.create({
    baseURL:'http://localhost:9527'
})

instance.interceptors.request.use(request =>{
    return request
})
instance.interceptors.response.use(response =>{
    return response.data
})

Component.prototype.$http = instance

export default instance

需要安装的npm插件

npm install  react@17 react-dom@17 react-router-dom@5 antd @craco/craco craco-less redux react-redux axios --force -S

异步请求thunk

npm i redux-thunk -S

调试模块

 npm i redux-devtools-extension -S