1.安装react项目
①使用webpack安装
npx create-react-app my-app
cd my-app
npm start②使用vite安装
创建Vite项目
npm create vite@latest my-vue-app --template react
cd my-app
npm 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 React.Component {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 instance
const 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 interceptor
service.interceptors.request.use(config => {// 做一些请求前置，例如添加token// config.headers['token'] = getToken()return config},error => {console.log(error)return Promise.reject(error)}
)// response interceptor
service.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 React.Component{constructor(props) {super(props)request.get('/article/getAll').then(res => {console.log(res)})}render(){// 模板}
}
5.使用redux
官方文档：https://cn.redux.js.org/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 creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export 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 />)
}
