当前位置: 首页 > news >正文

React项目规范:目录结构、根目录别名、CSS重置、路由、redux、二次封装axios

React项目(一)

  • 一、创建项目
  • 二、目录结构
  • 三、craco配置别名并安装less
    • 1.craco安装
    • 2.配置别名
    • 3.安装less
  • 四、CSS样式重置
  • 五、配置路由
  • 六、配置Redux
    • 1.创建大仓库
    • 2.创建小仓库
      • (1)方式1:RTK
      • (2)方式2:普通写法
  • 七、配置axios

一、创建项目

先创建项目:create-react-app 项目名,然后换个图标,换个标题

配置jsconfig.json:这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成, jsconfig.json是为了让vs code的代码提示更友好, 按需求决定是否配置;

{"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {"@/*": ["src/*"]},"jsx": "preserve","lib": ["esnext","dom","dom.iterable","scripthost"]}
}

二、目录结构

src文件夹的目录进行初始化:

assets: 存放静态资源 (如css, img等等)baseUI: 存放一些通用的组件, 不只是本项目, 其他项目也会使用的组件components: 存放本项目中通用的组件hooks: 自定义的hook函数router: 路由相关services: 网络请求相关stores: 状态管理, redux相关utils: 封装的工具函数views: 页面相关

三、craco配置别名并安装less

1.craco安装

1、安装craco:npm install craco

修改package.json:

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",👇👇👇👇👇👇
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

2.配置别名

在项目中层级嵌套会很深, 我们导入文件通常会有../../../甚至更多的上一级目录; 因此我们配置别名解决这个问题, 我的配置是使用@符号表示根目录

在项目根目录创建一个 craco.config.js 用于修改默认配置,该文件中的一些配置(如webpack)会和脚手架中的配置合并。修改别名的操作如下:

const path = require('path');module.exports = {webpack: {alias: {"@": path.resolve(__dirname, 'src'),'components': path.resolve(__dirname, 'src/components'),'store':path.resolve(__dirname,'src/store'),......}}
}

3.安装less

先安装:npm i craco-less

按照如下方式去craco.config.js中去配置一下:

const path = require('path');
const CracoLessPlugin = require('craco-less');module.exports = {//下面的配置和脚手架webpack合并webpack: {alias: {"@": path.resolve(__dirname, 'src'),'components': path.resolve(__dirname, 'src/components'),'store':path.resolve(__dirname,'src/store'),}},//配置lessplugins: [{plugin: CracoLessPlugin}]
}

🆗,应该可以用了

四、CSS样式重置

下载normalize.css, 再在src中的index.js文件引入normalize.css,这是给我们提供好的初始样式的一个模板吧。

npm i normalize.css

然后如果我们想自己自定义一些baseCSS,可以再新建一个文件

在这里插入图片描述

并且在normalize.css之后引入:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';import 'normalize.css';  //先引入模板
import '@/assets/css/reset.css' //引入自定义样式const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />
);

五、配置路由

安装

npm install react-router-dom

index.js配置:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import App from './App';import 'normalize.css';  //先引入模板
import '@/assets/css/reset.css' //引入自定义样式const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HashRouter><App /></HashRouter>
);

新建几个路由组件,并配置他们的路由信息

在这里插入图片描述

最后去App.jsx中通过useRoutes这个hook,引入路由配置。

import React, { memo } from 'react';
import { useRoutes } from 'react-router-dom';
import routes from '@/router';const App = memo(() => {return (<div><div className="app"><div className="header">Header</div><div className="content">{useRoutes(routes)}</div><div className="footer">Footer</div></div></div>)
})export default App

如果要用路由懒加载,则再加两步操作:

import React from "react";
// import Home from "@/views/Home";
// import Detail from "@/views/Detail";
// import Entire from "@/views/Entire";
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'));let routes = [{//重定向path:'/',element:<Navigate to='/home' />},{path: '/home',element: <Home/>},{path:'/detail',element: <Detail/>}, {path:'/entire',element:<Entire/>}
]export default routes;

在这里插入图片描述

六、配置Redux

安装:这里安装RTK同时也会安装redux的,除此之外我们还要一起安装react-redux

npm install react-redux @reduxjs/toolkit

1.创建大仓库

使用RTK的方式创建大store:

import { configureStore } from "@reduxjs/toolkit";
import homeReducer from './modules/home';
import entireReducer from './modules/entire'const store = configureStore({reducer: {home: homeReducer,entire: entireReducer,}
})export default store;

创建完了别忘了去入口文件包个标签

在这里插入图片描述

2.创建小仓库

为了复习之前的知识,这里我们用两种方式创建reducer函数:

在这里插入图片描述

(1)方式1:RTK

import { createSlice } from "@reduxjs/toolkit";const homeSlice = createSlice({name: 'home',initialState: {userName: 'zzy'},reducers: {changeUserName(state, action) {state.userName = action.payload;}}
})export default homeSlice.reducer;

(2)方式2:普通写法

entire/constants.js
const CHANGECOUNTER = 'changecounter';
export {CHANGECOUNTER};
entire/reducer.js
import * as actionTypes from './constants';let initialState = {counter: 0
}function reducer(state = initialState, action) {switch(action.type) {case actionTypes.CHANGECOUNTER:return {...state, counter: action.num}default: return state;}
}export default reducer;
entire/actionCreators.js
import * as actionTypes from './constants';export const changeCounter = (num) => {return {type: actionTypes.CHANGECOUNTER,num}
}
entire/index.js
import reducer from "./reducer";
export default reducer;

七、配置axios

首先安装axios:npm i axios

在这里插入图片描述

二次封装axios:

api/request/index.js
import axios from 'axios';
import { BASEURL, TIMEOUT } from './config';class HYRequest {constructor(baseURL, timeout) {this.instance = axios.create({baseURL,timeout,})this.instance.interceptors.response.use(res => {return res.data;})}request(config) {return this.instance.request(config);}get(config) {return this.request({...config, method: 'get'});}post(config) {return this.request({...config, method: 'post'});}
}//用变量存储baseURL的话,如果有其他的url,只需要导出其他的实例就可以了
export default new HYRequest(BASEURL, TIMEOUT);
api/request/config.js
const BASEURL = 'http://codercba.com:1888/airbnb/api';
const TIMEOUT = 6000;export {BASEURL, TIMEOUT}

说实话这里的封装还挺巧妙的,和之前做vue项目的封装不一样,这里面用类来存储axios的实例,发请求都会调用类的实例的方法,然后该方法再调用axios实例上的方法。不过目前好像还没get到这样封装的好处。。

找个组件测试一下:

import React, { memo, useEffect } from 'react';
import hyRequest from '@/api';const Home = memo(() => {useEffect(() => {hyRequest.get({url:'/home/highscore'}).then(res => {console.log(res);})},[])return (<div><h1>Home</h1></div>)
})export default Home

🆗,现在项目搭建的就差不多了,接下来就开始写里面的东西,放到下一篇文章中吧

相关文章:

React项目规范:目录结构、根目录别名、CSS重置、路由、redux、二次封装axios

React项目&#xff08;一&#xff09;一、创建项目二、目录结构三、craco配置别名并安装less1.craco安装2.配置别名3.安装less四、CSS样式重置五、配置路由六、配置Redux1.创建大仓库2.创建小仓库&#xff08;1&#xff09;方式1&#xff1a;RTK&#xff08;2&#xff09;方式2…...

SystemVerilog 教程第一章:简介

SystemVerilog 教程像 Verilog 和 VHDL 之类的硬件描述语言 (HDL) 主要用于描述硬件行为&#xff0c;以便将其转换为由组合门电路和时序元件组成的数字块。为了验证 HDL 中的硬件描述正确无误&#xff0c;就需要具有更多功能特性的面向对象的编程语言 (OOP) 来支持复杂的测试过…...

【Java|基础篇】逻辑控制-顺序结构、分支结构和循环结构

文章目录顺序结构分支结构if单分支语句if else双分支语句if else if else多分支语句switch语句循环语句for循环while循环do while循环continuebreak总结顺序结构 顺序结构是指代码按照从上往下的顺序依次执行 分支结构 选择语句是条件成立时,才会执行的语句.共有三种.分为是if…...

【数据挖掘实战】——家用电器用户行为分析及事件识别(BP神经网络)

项目地址&#xff1a;Datamining_project: 数据挖掘实战项目代码 目录 一、背景和挖掘目标 1、问题背景 2、原始数据 3、挖掘目标 二、分析方法与过程 1、初步分析 2、总体流程 第一步&#xff1a;数据抽取 第二步&#xff1a;探索分析 第三步&#xff1a;数据的预处…...

Kmeans聚类算法-python

import random import pandas as pd import numpy as np import matplotlib.pyplot as plt # 计算欧拉距离 def calcDis(dataSet, centroids, k): clalist[] for data in dataSet: diff np.tile(data, (k, 1)) - centroids #相减 (np.tile(a,(2,1))就是把…...

Linux|奇怪的知识|locate命令---文件管理小工具

前言: Linux的命令是非常多的&#xff0c;有一些冷门的命令&#xff0c;虽然很少用&#xff0c;但可能会有意想不到的功能&#xff0c;例如&#xff0c;本文将要介绍的locate命令。 &#xff08;平常很少会想到使用此命令&#xff0c;find命令使用的更多&#xff0c;偶然想起…...

Cadence Allegro 导出Function Pin Report报告详解

⏪《上一篇》   🏡《上级目录》   ⏩《下一篇》 目录 1,概述2,Function Pin Reportt作用3,Function Pin Report示例4,Function Pin Report导出方法4.1,方法14.2,方法2B站关注“硬小二”浏览更多演示视频 1,概述...

蓝桥杯2018年第九题-缩位求和

题目&#xff1a;在电子计算机普及以前&#xff0c;人们经常用一个粗略的方法来验算四则运算是否正确。比如&#xff1a;248 * 15 3720把乘数和被乘数分别逐位求和&#xff0c;如果是多位数再逐位求和&#xff0c;直到是1位数&#xff0c;得2 4 8 14 > 1 4 5;1 5 65…...

基于Yolv5s的口罩检测

1.Yolov5算法原理和网络结构 YOLOv5按照网络深度和网络宽度的大小&#xff0c;可以分为YO-LOv5s、YOLOv5m、YOLOv5l、YOLOv5x。本文使用YOLOv5s&#xff0c;它的网络结构最为小巧&#xff0c;同时图像推理速度最快达0.007s。YO-LOv5的网络结构主要由四部分组成&#xff0c;分别…...

Linux基本命令

Linux基本命令Linux的目录结构Linux命令入门目录切换相关命令&#xff08;cd/pwd&#xff09;相对路径、绝对路径和特殊路径符创建目录命令&#xff08;mkdir&#xff09;文件操作命令part1 (touch、cat、more)文件操作命令part2 (cp、mv、rm&#xff09;查找命令 (which、find…...

云原生场景下的安全左移

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/129430859 一、安全左移概述 安全左移需要考虑开发安全、软件供应链安全、镜像仓库、配置核查这四个部分。 首先是开发安全&#xff0c;安全团队需要关注代码漏洞&#xff0c;比如使用代码检查工具进…...

mysql面试经典问题

文章目录 1. 能说下myisam 和 innodb的区别吗?2. 说下mysql的索引有哪些吧,聚簇和非聚簇索引又是什么?3. 那你知道什么是覆盖索引和回表吗?4. 锁的类型有哪些呢5. 你能说下事务的基本特性和隔离级别吗?6. 那ACID靠什么保证的呢?7. 那你说说什么是幻读,什么是MVCC?幻读什…...

微信小程序|基于小程序+C#制作一个考试答题小程序

基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试。 一、小程序...

【1605. 给定行和列的和求可行矩阵】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你两个非负整数数组 rowSum 和 colSum &#xff0c;其中 rowSum[i] 是二维矩阵中第 i 行元素的和&#xff0c; colSum[j] 是第 j 列元素的和。换言之你不知道矩阵里的每个元素&#xff0c;但是你知…...

Linux命令之nano命令

一、nano命令简介 nano是一个小型、免费、友好的编辑器&#xff0c;旨在取代非免费Pine包中的默认编辑器Pico。nano不仅复制了Pico的外观&#xff0c;还实现了Pico中一些缺失&#xff08;或默认禁用&#xff09;的功能&#xff0c;例如“搜索和替换”和“转到行号和列号”。nan…...

IT项目管理(作业1)

一.单选题&#xff08;共12题,100.0分&#xff09; 1.以下哪项是项目的一个实例?( ) A、改进现有的业务流程或程序B、为公司运营提供信息技术支持C、批量生产一种新近开发出来的家用电冰箱D、管理一个公司 我的答案&#xff1a;A 2.下列哪项不能成为项目结束的理由?( ) A…...

蓝桥杯嵌入式(G4系列):串口收发

前言&#xff1a; 在整个蓝桥杯考试中涉及串口的次数还是较多&#xff0c;这里写下这篇博客&#xff0c;记录一下自己的学习过程。 STM32Cubemx配置&#xff1a; 首先&#xff0c;我们点击左侧的Connectivity选择USART1进行如下配置。 使能串口中断 在左侧的管脚配置上也要做出…...

「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…...

第17章 关于局部波动率的一些总结

这学期会时不时更新一下伊曼纽尔德曼&#xff08;Emanuel Derman&#xff09; 教授与迈克尔B.米勒&#xff08;Michael B. Miller&#xff09;的《The Volatility Smile》这本书&#xff0c;本意是协助导师课程需要&#xff0c;发在这里有意的朋友们可以学习一下&#xff0c;思…...

反转链表合并两个有序链表链表分割链表的回文结构相交链表

反转链表来源&#xff1a;杭哥206. 反转链表 - 力扣&#xff08;LeetCode&#xff09;typedef struct ListNode ListNode; struct ListNode* reverseList(struct ListNode* head) {if (headNULL){return NULL;}ListNode* prevhead;ListNode* curhead->next;ListNode* furNUL…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...