文章目录
一、使用命令搭建项目
npx create-react-app perojectname
二、安装react-redux、@reduxjs/toolkit
npm i @reduxjs/toolkit react-redux
三、安装react-router-dom
npm i react-router-dom
四、安装craco(路径联想配置)
npm i -D @craco/craco
项目根目录创建craco.config.js
const path =require('path')
module.exports = {
webpack :{
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}
五、编写redux结构
- src下新建store文件夹,store下新建index.js、modules文件夹,modules下新建testStore.js
//index.js
import { configureStore } from '@reduxjs/toolkit'
import testReducer from './modules/testStore'
const store = configureStore({
reducer: {
test:testReducer
}
})
export default store
//testStore.js
import {createSlice} from '@reduxjs/toolkit';
import axios from "axios";
const testStore = createSlice(
{
name: 'test',
//数据状态state
initialState:{
testList:[]
},
reducers: {
//同步修改方法
setTestList(state, action) {
state.testList = action.payload
}
}
}
)
//解构actionCreater函数
const {setTestList} = testStore.actions
//异步函数
const getTestList = ()=>{
return async(dispatch) =>{
const res = await axios.get('')
dispatch(setTestList(res.data))
}
}
//导出异步方法获取数据,不是异步的时候可以导出解构出来的同步方法
export {geteTestList, setTestList}
//导出reducer
const reducer = testStore.reducer
export default reducer
五、编写router结构
- src下新建router文件夹,router下新建index.js,在pages文件夹下创建路由表中需要的组件并引入
import {createBrowserRouter} from 'react-router-dom'
const router = createBrowserRouter(
[
{
path:'/',
element: <Layout />,
children: [
{
index:true,
element: <A/>
},
{
path: 'B/:id/:name',
element: <B />
}
]
},
{
path:'/Login',
element: <Login/>,
},
{
path:'*',
element: <NotFount />
}
]
)
export default router
六、修改根目录index.js
root.render(
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
);
七、安装axios、封装axios请求
npm i axios
/**
* 网络请求配置
*/
import axios from "axios";
let baseURL = "http://.......";
let timeOut = 10000;
export function request(config){
config.headers={
}
//使用axios创建公共的配置信息,不需要重复创建
const instance = axios.create({
baseURL:baseURL ,
headers:{...config.headers},
timeout:timeOut
});
// axios请求拦截器 请求
instance.interceptors.request.use(config=>{return config;},err=>{console.log(err);})
// axios响应拦截器 数据返回
instance.interceptors.response.use(res=>{
// 响应拦截处理
return res;
},err=>{
console.log(err);
})
return instance(config);
}
八、安装json-server,使用mock数据
npm i json-server -D
创建一个json文件,在package.json中配置命令
"server": "json-server json文件的路径 --port 8088"
九、启动项目
- 启动mock数据
npm run server
- 启动react项目
npm start