搭建react项目

一、使用命令搭建项目

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