一、项目初始化
1、创建项目
npx create-react-app react-basic
2、清理项目目录,根据模板搭建基本页面结构
3、安装sass包 yarn add sass
4、安装bootstrap包 yarn add bootstrap@4.5.0 ,导入bootstrap样式文件
5、配置Redux基本配置 yarn add redux@3
6、如果碰到项目报错或不兼容可能需要降版本
yarn add react@17.0.2 react-dom@17.0.2 --save
7、配置react-redux,连接react和redux
yarn add react-redux
8、渲染任务列表
yarn add classnames
9、安装axios
yarn add axios
10、中间件
1、yarn add redux-thunk
2、导入redux-thunk
3、将thunk添加到applyMiddleware函数的参数中
4、yarn add redux-devtools-extension
5、从该中间件中导入composeWithDevTools函数
6、调试该函数,将applyMiddleware作为参数传入
import channelsReducer from './reducers/channels'
import { createStore,combineReducers, applyMiddleware} from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
const reducer=combineReducers({channelsReducer})
const store=createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
export default store
11、配置路由
yarn add react-router-dom@5.3.0
12、Ant Design组件库
yarn add antd
13、配置路径别名craco,可以用@书写路径
yarn add -D @craco/craco
创建craco.config.js
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定:使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
}
}
}
修改package.json配置
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},