首先进行安装: npm i craco-less
最新版本React同样会有适配问题, 安装方式: npm i craco-less@2.1.0-alpha.0
安装完成按照如下方式配置less, 配置完成创建一个less文件测试一下, 样式生效就配置成功了
const path = require('path') const CracoLessPlugin = require('craco-less') const reslove = pathname => path.resolve(__dirname, pathname) module.exports = { // less plugins: [ { plugin: CracoLessPlugin } ], webpack: { alias: { "@": reslove("src") } } }
目录结构
接下来对项目src文件夹下进行目录结构的划分, 我是按照如下方式进行划分的:
assets: 存放静态资源 (如css, img等等)
base-ui: 存放一些通用的组件, 不只是本项目, 其他项目也会使用的组件
components: 存放本项目中通用的组件
hooks: 自定义的hook函数
router: 路由相关
services: 网络请求相关
stores: 状态管理, redux相关
utils: 封装的工具函数
views: 页面相关
样式重置
对默认CSS样式进行重置:
下载normalize.css, 再在src中的index文件引入normalize.css
可以通过npm安装npm i normalize.css
import React from 'react' import ReactDOM from 'react-dom/client' // 引入样式重置文件 import "normalize.css" import App from './App' const root = ReactDOM.createRoot(document.querySelector("#root")) root.render(<App/>)
创建一个reset.css文件, 用来自己编写一些样式的重置
* { margin: 0; padding: 0; } a { text-decoration: none; color: #000; outline: none; } ul, li { list-style: none; } input { outline: none; border: none; } i { font-style: normal; }
并且引入
import React from 'react' import ReactDOM from 'react-dom/client' // 引入样式重置文件 import "normalize.css" import "./assets/css/reset.css" import App from './App' const root = ReactDOM.createRoot(document.querySelector("#root")) root.render(<App/>)
Router配置
安装: npm i react-router-dom
安装完成配置映射关系即可, 示例代码如下:
import React from "react" import { Navigate } from "react-router-dom" // 懒加载 const Home = React.lazy(() => import("@/views/home")) const Detail = React.lazy(() => import("@/views/detail")) const Entire = React.lazy(() => import("@/views/entire")) const routes = [ { path: "/", element: <Navigate to="/home"/> }, { path: "/home", element: <Home/> }, { path: "/detail", element: <Detail/> }, { path: "/entire", element: <Entire/> } ] export default routes
配置完成使用, 还需要在src目录下index.js文件中, 对App组件进行包裹
import React, { Suspense } from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App" const root = ReactDOM.createRoot(document.querySelector("#root")) root.render( <BrowserRouter> <Suspense fallback="lodaing"> <App/> </Suspense> </BrowserRouter> )
Redux状态管理
Redux有两种模式
普通方式: 目前项目中依然使用率非常高;
@reduxjs/toolkit方式: 推荐方式, 未来的趋势;(下面简单演示一样rtk模式)
rtk模式安装: npm i @reduxjs/toolkit react-redux
安装完成后再store文件夹下的index.js中进行配置
import { configureStore } from '@reduxjs/toolkit' const store = configureStore({ reducer: {} }) export default store
同样需要对根组件App进行包裹
import React, { Suspense } from "react" import ReactDOM from "react-dom/client" import { Provider } from "react-redux" import App from "./App" import store from "./stores" const root = ReactDOM.createRoot(document.querySelector("#root")) root.render( <Provider store={store}> <App/> </Provider> )
axios配置
项目中我采用axios发送网络请求
首先安装axios: npm i axios
一般会对axios进行二次封装, 代码如下
import axios from "axios"; import { BASE_URL, TIMEOUT } from "./config"; class YQRequest { // 传入默认配置信息, 创建新的实例 constructor(baseURL, timeout=10000) { this.instance = axios.create({ baseURL, timeout }) // 响应成功的拦截, 返回res.data // this.instance.interceptors.response.use(res => { // return res.data // }, err => { // return err // }) } // 1.封装request request(config) { // 返回一个Promise, 对数据转换 return new Promise((reslove, reject) => { this.instance.request(config).then(res => { reslove(res.data) }).catch(err => { reject(err) }) }) } // 2.封装get get(config) { // 调用自己的request函数 return this.request({ ...config, methods: "get" }) } // 3.封装psot post(config) { // 调用自己的request函数 return this.request({ ...config, methods: "post" }) } } export default new YQRequest(BASE_URL, TIMEOUT)
export const BASE_URL = "http://codercba.com:1888/airbnb/api" export const TIMEOUT = 10000
