搭建react全家桶

1.安装react项目

①使用webpack安装

npx create-react-app my-appcd my-appnpm start

②使用vite安装

创建Vite项目

npm create vite@latest my-vue-app --template reactcd my-appnpm run dev

配置vite.config.js

import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import path from 'path'export default defineConfig({plugins: [react()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},server: {host: 'localhost',port: 8080,open: true,proxy: {'/api': {target: '后端接口域名',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),}}}})

下面安装以VITE+REACT项目为基础

2.安装scss

npm install sass sass-resources-loader --save

安装完插件即可使用，不需要在vite.config.js配置

使用：

components/test/index.scss (新创建scss文件)

.content{background: red;}

components/test/index.jsx

import React from "react";import './index.scss'export default class Test extends ponent {constructor(props){super(props)}render(){return (<div class="content"><div>测试组件</div></div>)}}

jsx文件直接引入对应的scss文件即可

3.安装路由

npm i react-router-dom --save

方式一：

main.jsx

import React from 'react'import ReactDOM from 'react-dom/client'import { BrowserRouter, Routes } from "react-router-dom";import App from './App'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>)

App.jsx

import { Routes} from "react-router-dom";import routes from '@/router/index'function App() {return (<Routes>{routes}</Routes>)}export default App

创建router/index.jsx文件

import { Route, Navigate } from "react-router-dom";import Index from '@/pages/index.jsx'export default [<Route key="Navigate" path="*" element={<Navigate to="/"/>} />,//重定向到首页<Route key="Index" path="/" element={ <Index/>} />]

方式二（推荐）：使用useRoutes

main.jsx

import React from 'react'import ReactDOM from 'react-dom/client'import { BrowserRouter } from "react-router-dom";import App from './App'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>)

App.jsx

import { useRoutes } from "react-router-dom";import routes from '@/router/index.jsx'function App() {const element = useRoutes(routes);return (<>{element}</>)}export default App

创建router/index.jsx

import { Navigate } from 'react-router-dom'import Index from '@/pages/index'const router = [{path: "/",element: <Index />,children: [// 二级路由...]},// 配置路由重定向 可配置404页面{path: '*',element: <Navigate to='/' />}]export default router

路由配置后只需要创建pages/index.jsx页面即可使用

import React from 'react'export default function Index(){return (<div>我是首页</div>)}

*注意如果是vite+react项目，因为是jsx文件，这块不能使用class只能以函数形式表示页面

这时候即可根据路由访问页面了

http://127.0.0.1:8080/

4.使用axios

安装axios

npm install axios --save

创建utils/request.js

import axios from 'axios'// create an axios instanceconst service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use(config => {// 做一些请求前置，例如添加token// config.headers['token'] = getToken()return config},error => {console.log(error)return Promise.reject(error)})// response interceptorservice.interceptors.response.use(response => {const res = response.data// if the custom code is not 200, it is judged as an error.if (res.code !== 200) {// 配置响应拦截return Promise.reject(new Error(res.msg || '网络异常，请稍后~'))} else {return res}},error => {console.log(error)return Promise.reject(error)})export default service

添加环境变量文件

.env.development

NODE_ENV = 'development'VITE_APP_ENV = 'development'VITE_APP_BASE_API = '接口请求的域名'

.env.production

NODE_ENV = 'production'VITE_APP_ENV = 'production'VITE_APP_BASE_API = '接口请求的域名'

使用环境变量

import.meta.env.VITE_APP_BASE_API

*环境变量需要VITE_APP前缀，而且每次添加变量需要重新启动

使用utils/request.js

import request from '@/utils/request'// 其他引入文件export default class Index extends ponent{constructor(props) {super(props)request.get('/article/getAll').then(res => {console.log(res)})}render(){// 模板}}

5.使用redux

官方文档：https://cn./tutorials/quick-start/

npm install @reduxjs/toolkit react-redux --save

修改main.jsx文件

/* 其他引入的js不变，只是新增这2个插件 */import store from '@/store/index'import { Provider } from 'react-redux'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider></React.StrictMode>)

创建store/index.js文件

import { configureStore } from "@reduxjs/toolkit";// configureStore 创建一个 redux 数据const store = configureStore({reducer: {},});export default store;

创建store/modules/counterSlice.js测试文件（官方例子）

import { createSlice } from '@reduxjs/toolkit'export const counterSlice = createSlice({name: 'counter',initialState: {value: 0},reducers: {increment: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值，因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.value += 1},decrement: state => {state.value -= 1},incrementByAmount: (state, action) => {state.value += action.payload}}})// 每个 case reducer 函数会生成对应的 Action creatorsexport const { increment, decrement, incrementByAmount } = counterSlice.actionsexport default counterSlice.reducer

将counterSlice挂载到store/index.js里面

/* 其他引入的插件不需要变，新增这个引入 */import counterReducer from '@/store/modules/counterSlice'// configureStore 创建一个 redux 数据const store = configureStore({reducer: {counter: counterReducer},});export default store;

使用redux

pages/index.jsx

import { useSelector, useDispatch } from 'react-redux'import { decrement, increment } from '@/store/modules/counterSlice'export default function Index(){const count = useSelector(state => state.counter.value)const dispatch = useDispatch()return (<div><div><buttonaria-label="Increment value"onClick={() => dispatch(increment())}>Increment</button><span>{count}</span><buttonaria-label="Decrement value"onClick={() => dispatch(decrement())}>Decrement</button></div></div>)}

最终的文件目录如下

6.使用ant-design UI框架

npm install antd --save

安装完然后直接引入组件使用就可以

pages/antd.jsx

import { DatePicker } from 'antd';export default () => {return (<DatePicker />)}