React学习笔记14

一、使用vite创建项目

npm create vite 项目名

创建之后运行

npm i
npm run dev

二、按照业务规范整理项目目录（重点src目录）

下面是各个文件夹的作用 

三、安装SCSS

在Vue开发中SCSS非常的常用，在CRA项目中如何接入SCSS呢？和Vue中一样：

npm install sass -D

 然后将项目中的css文件改为scss文件（后缀）

四、安装Ant Design

Ant Design是蚂蚁金服出品的社区使用最广的React PC组件库，内置了常用的现成组件，和element Plus是同类型的东西

npm install antd --save

安装完成之后修改src/App.js,引入antd的按钮组件

import React from 'react';
import { Button } from 'antd';const App = () => (<div className="App"><Button type="primary">Button</Button></div>
);export default App;

五、配置基础路由Router

安装路由包

npm install react-router-dom

创建路由结构

import Login from '../pages/Login'
import {createBrowserRouter} from 'react-router-dom'const router = createBrowserRouter([{path:'/',element:<Login></Login>}
])export default router

router>index.jsx

 六、封装request请求模块

import axios from 'axios'const request = axios.create({baseURL:'',timeout:5000
})// 添加请求拦截器
// 在请求发送之前做拦截，插入自定义配置[参数的处理]
request.interceptors.request.use((config)=>{return config
},(error)=>{return Promise.reject(error)
})// 添加响应拦截器
request.interceptors.response.use((response)=>{// 状态码为2xx的触发该函数return response.data
},(error)=>{// 状态码不是2xx的触发该函数return Promise.reject(error)
})export {request}

utils>request.jsx

在index.jsx中统一导出

import {request} from './request'export {request
}

 utils>index.jsx

七、Redux的配置

安装

npm i react-redux @reduxjs/toolkit

创建文件结构

import { createSlice } from '@reduxjs/toolkit'const userStore = createSlice({name: "user",initialState: {token: ''},reducers: {setToken(state, action) {state.token = action.payload}}
})// 解构
const {setToken}=userStore.actions// 获取reducer函数
const useReducer = userStore.reducerexport {setToken}export default useReducer

 store>modules>user.jsx

// 组合Redux子模块
import {configureStore} from '@reduxjs/toolkit'
import userReducer from './modules/user'export default configureStore({reducer:{user:userReducer}
})

store>index.jsx

绑定至组件

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import router from './router'
import { Provider } from 'react-redux'
import store from './store'createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><RouterProvider router={router}></RouterProvider></Provider></StrictMode>,
)

src>main.jsx

下一章：项目打包与打包优化