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.reducer

export {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

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