【React】项目的目录结构全面指南
文章目录
- 一、React 项目的基本目录结构
- 1. node_modules
- 2. public
- 3. src
- 4. App.js
- 5. index.js
- 6. .gitignore
- 7. package.json
- 8. README.md
- 二、React 项目的高级目录结构
- 1. api
- 2. hooks
- 3. pages
- 4. redux
- 5. utils
- 三、最佳实践
在开发一个 React 项目时,良好的目录结构可以极大地提升开发效率和代码的可维护性。本文将详细介绍 React 项目的标准目录结构,涵盖从基础到高级的最佳实践,帮助你构建一个清晰、有条理的项目架构。
一、React 项目的基本目录结构
一个典型的 React 项目通常由以下几个主要目录和文件组成:
my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── ...
├── src/
│ ├── components/
│ ├── assets/
│ ├── App.js
│ ├── index.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── ...
1. node_modules
node_modules
目录包含了项目的所有依赖包,由 npm 或 yarn 自动生成和管理。在项目中,我们一般不会手动修改这个目录。
2. public
public
目录存放静态资源,包含 HTML 文件、图标等。默认的 index.html
文件是 React 应用的入口 HTML 文件。
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My React App</title>
</head>
<body><div id="root"></div>
</body>
</html>
3. src
src
目录是我们主要编写代码的地方,包含了所有的 React 组件、样式和其他资源。通常会按照功能或组件类型来组织代码。
components
components
目录存放项目的所有 React 组件。通常,我们会按照组件的功能或页面进行子目录的划分。
// src/components/Header.js
import React from 'react';const Header = () => (<header><h1>My React App</h1></header>
);export default Header;
assets
assets
目录存放项目的静态资源,如图片、字体、样式等。
4. App.js
App.js
是 React 应用的根组件,通常用于设置路由和全局状态管理。
// src/App.js
import React from 'react';
import Header from './components/Header';const App = () => (<div><Header /><main><p>Welcome to my React app!</p></main></div>
);export default App;
5. index.js
index.js
是 React 应用的入口文件,负责渲染根组件 App
到 index.html
中的 root
节点。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));
6. .gitignore
.gitignore
文件用于指定哪些文件和目录不应被 Git 版本控制系统追踪。
# .gitignore
node_modules/
build/
dist/
.env
7. package.json
package.json
文件包含项目的元数据和依赖包信息。
{"name": "my-react-app","version": "1.0.0","scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"dependencies": {"react": "^17.0.2","react-dom": "^17.0.2"}
}
8. README.md
README.md
文件用于描述项目的基本信息、安装步骤和使用说明。
# My React AppThis is a simple React application.## Installationnpm install## Usagenpm start
二、React 项目的高级目录结构
随着项目的复杂度增加,我们需要更灵活的目录结构来管理代码。以下是一个高级的 React 项目目录结构示例:
my-react-app/
├── node_modules/
├── public/
├── src/
│ ├── api/
│ │ └── index.js
│ ├── components/
│ │ ├── common/
│ │ └── specific/
│ ├── hooks/
│ │ └── useCustomHook.js
│ ├── pages/
│ │ ├── Home.js
│ │ └── About.js
│ ├── redux/
│ │ ├── actions/
│ │ ├── reducers/
│ │ └── store.js
│ ├── utils/
│ │ └── helpers.js
│ ├── App.js
│ ├── index.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── ...
1. api
api
目录用于存放与后端 API 的交互逻辑。
// src/api/index.js
import axios from 'axios';const apiClient = axios.create({baseURL: 'https://api.example.com',headers: {'Content-Type': 'application/json'}
});export const fetchData = async () => {const response = await apiClient.get('/data');return response.data;
};
2. hooks
hooks
目录用于存放自定义的 React Hooks。
// src/hooks/useCustomHook.js
import { useState, useEffect } from 'react';const useCustomHook = () => {const [data, setData] = useState(null);useEffect(() => {// Fetch data or perform other side effects}, []);return data;
};export default useCustomHook;
3. pages
pages
目录用于存放页面组件,这些组件通常会包含路由配置。
// src/pages/Home.js
import React from 'react';const Home = () => (<div><h1>Home Page</h1></div>
);export default Home;
4. redux
redux
目录用于存放 Redux 的相关文件,包括 actions、reducers 和 store 配置。
// src/redux/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';const store = createStore(rootReducer);export default store;
5. utils
utils
目录用于存放通用的工具函数。
// src/utils/helpers.js
export const formatDate = (date) => {return new Date(date).toLocaleDateString();
};
三、最佳实践
- 模块化组织
将代码模块化是保持代码清晰和可维护的关键。将不同功能的代码分离到不同的目录中,有助于团队协作和代码的可读性。
- 避免过度嵌套
尽量避免目录结构过度嵌套,这会增加项目的复杂度和文件的查找难度。保持目录结构扁平化,有助于快速定位和修改代码。
- 合理命名
目录和文件的命名应简洁明了,反映其内容和用途。例如,components
目录下的文件应当命名为组件名称,utils
目录下的文件应当命名为工具函数名称。
- 统一风格
保持代码风格的一致性,有助于提高代码的可读性和团队协作效率。使用 ESLint 和 Prettier 等工具,可以自动化地保持代码风格一致。
相关文章:
【React】项目的目录结构全面指南
文章目录 一、React 项目的基本目录结构1. node_modules2. public3. src4. App.js5. index.js6. .gitignore7. package.json8. README.md 二、React 项目的高级目录结构1. api2. hooks3. pages4. redux5. utils 三、最佳实践 在开发一个 React 项目时,良好的目录结构…...
Django学习(二)
get请求 练习: views.py def test_method(request):if request.method GET:print(request.GET)# 如果链接中没有参数a会报错print(request.GET[a])# 使用这个方法,当查询不到参数时,不会报错而是返回你设置的值print(request.GET.get(c,n…...
Java引用类型
强软弱虚 以 ZGC 为例,谈一谈 JVM 是如何实现 Reference 语义的 SoftReference 到底在什么时候被回收 ? 如何量化内存不足 ? PhantomReference 和 WeakReference 究竟有何不同 ThreadLocal 和 Netty ByteBuf中使用到的引用类型 https://w…...
ubunto安装redis
更新包管理工具 sudo apt update 安装Redis sudo apt install redis-server Redis已经安装并且服务已启动 sudo systemctl status redis-server Redis开机启动项 sudo systemctl enable redis-server 可以编辑配置文件 /etc/redis/redis.conf,然后重启Redis服务 比如…...
【odoo17 | Owl】前端js钩子调用列表选择视图
概要 在我们选择多对一或者多对多字段的时候,经常看到可以弹出列表弹窗让人一目了然的效果,效果如下: 那么,这种效果是odoo本身封装好的组件,我们在平时的前端界面开发的时候,既不是后端视图的情况下&#…...
MATLAB基础:函数与函数控制语句
今天我们继续学习Matlab中函数相关知识。 API的查询和调用 help 命令是最基本的查询方法,可查询所有目录、指定目录、命令、函数。 我们直接点击帮助菜单即可查询所需的API函数。 lookfor 关键字用于搜索相关的命令和函数。 如,我们输入lookfor inpu…...
2024.7.30 搜索插入位置(二分法)
题解 二分法 left和right标记二分区间 ans标记n,因为存在大于所有数的可能。 var searchInsert function(nums, target) {const n nums.length;let left 0, right n - 1, ans n;while (left < right) {//计算中位数let mid ((right - left) >> 1)…...
Socket通信(C++)
文章目录 什么是SocketSocket通信过程C Socket通信APIint socket(int domain, int type, int protocol);int bind(int sockfd, const struct sockaddr *addr, socklen_t addrlen);struct sockaddrstruct sockaddr_unstruct sockaddr_in / struct sockaddr_in6 int connect(int …...
小白学大模型:LLaMA-Factory 介绍与使用
最近这一两周看到不少互联网公司都已经开始秋招提前批了。 不同以往的是,当前职场环境已不再是那个双向奔赴时代了。求职者在变多,HC 在变少,岗位要求还更高了。 最近,我们又陆续整理了很多大厂的面试题,帮助一些球友…...
java算法day26
java算法day26 207 课程表208 实现Trie(前缀树) 207 课程表 这题对应的知识是图论里的拓扑排序的知识。从题意就可以感受出来了。题目说如果要学习某课程,那么就需要先完成某课程。 这里我描述比较复杂的情况:课程与课程之间也有可能是多对一的场景或者…...
docker笔记7-dockerfile
docker笔记7-dockerfile 一、dockerfile介绍二、dockerfile指令三、构建自己的镜像 一、dockerfile介绍 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。 以下是常用的 Dockerfile 关键字的完整列表和说明: 二、docker…...
Spring-cloud Alibaba组件--Dubbo
远程调用技术 RestFul风格 基于HTTP协议实现,而HTTP是一种网络传输协议,基于TCP,规定了数据传输的格式。 RPC协议 Remote Produce Call 远程过程调用,类似的还有 RMI ( remote method invoke)。自定义数…...
右值引用--C++11
左值引用和右值引用 传统的C语法中就有引用的语法,而C11中新增了的右值引用语法特性,所以从现在开始我们 之前学习的引用就叫做左值引用。无论左值引用还是右值引用,都是给对象取别名。 什么是左值?什么是左值引用?…...
这样做外贸报价表,客户看了才想下单
报价,是外贸业务中最重要的一步,作为外贸人,不会做报价表可不行。有人说,直接在邮件里回复价格不就好了?是的,产品简单的可以这么做,但你也不能忽视报价表的价值,一份完美的价格表对…...
Swift学习入门,新手小白看过来
😄作者简介: 小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。 😊 座右铭:不…...
【Ant Design Pro】快速上手
初始化 初始化脚手架:快速开始 官方默认使用 umi4,这里文档还没有及时更新(不能像文档一样选择 umi 的版本),之后我选择 simple。 然后安装依赖。 在 package.json 中: "start": "cross-e…...
Hive3:Hive初体验
1、创建表 CREATE TABLE test(id INT, name STRING, gender STRING);2、新增数据 INSERT INTO test VALUES(1, 王力红, 男); INSERT INTO test VALUES(2, 钉钉盯, 女); INSERT INTO test VALUES(3, 咔咔咔, 女);3、查询数据 简单查询 select * from test;带聚合函数的查询 …...
blender顶点乱飞的问题解决
初学blender,编辑模式下移动某些顶点,不管是移动还是滑动都会出现定点乱飞的问题,后来才发现是开了吸附工具的原因!!!! 像下面这样,其实我只是在Z轴上移动,但是就跑的很…...
Elasticsearch(ES) 集群脑裂
脑裂问题(split-brain problem)是指一个分布式系统中,当网络分裂(network partition)发生时,导致系统内部的两个或多个节点相互独立地认为自己仍然与其他节点连接,每个节点组都试图执行操作,这可能会导致数…...
spark 3.0.0源码环境搭建
环境 Spark版本:3.0.0 java版本:1.8 scala版本:2.12.19 Maven版本:3.8.1 编译spark 将spark-3.0.0的源码导入到idea中 执行mvn clean package -Phive -Phive-thriftserver -Pyarn -DskipTests 执行sparksql示例类SparkSQLExam…...
3.3、matlab彩色图和灰度图的二值化算法汇总
1、彩色图和灰度图的二值化算法汇总原理及流程 彩色图和灰度图的二值化算法的原理都是将图像中的像素值转化为二值(0或1),以便对图像进行简化或者特定的图像处理操作。下面分别介绍彩色图和灰度图的二值化算法的原理及流程: 1)彩色图的二值化算法原理及流程 (1)原理:…...
新手必看:Elasticsearch 入门全指南
Elasticsearch 入门介绍 Elasticsearch 是一个开源的分布式搜索和分析引擎,广泛应用于处理大规模数据和实时搜索需求。它基于 Apache Lucene 构建,具备高可扩展性和分布式特性,能够快速、可靠地存储、搜索和分析大量数据。本文将介绍 Elasti…...
【Linux】TCP全解析:构建可靠的网络通信桥梁
文章目录 前言1. TCP 协议概述2. TCP报头结构3. 如何理解封装和解包呢?4. TCP的可靠性机制4.1 TCP的确认应答机制4.2 超时重传机制 5. TCP链接管理机制5.1 经典面试题:为什么建立连接是三次握手?5.2 经典面试题:为什么要进行四次挥…...
图像处理 -- ISP中的3DNR与2DNR区别及实现原理
ISP中的3DNR与2DNR区别及实现原理 2DNR(2D Noise Reduction) 2DNR的原理: 2DNR主要针对单帧图像进行降噪处理。它利用空间域内的像素值,采用空间滤波的方法来减少噪声。常用的方法包括均值滤波、中值滤波和高斯滤波等。这些方法…...
硬盘分区读不出来的解决之道:从自救到专业恢复
在日常的计算机使用过程中,硬盘分区读不出来的问题常常令人头疼不已。这一问题不仅阻碍了用户对数据的正常访问,还可能预示着数据安全的潜在威胁。硬盘分区读不出来,通常是由于分区表损坏、文件系统错误、物理扇区损坏、驱动程序冲突或硬件连…...
盘点2024年网上很火的4个语音识别转文字工具。
语音识别转文字是一项非常实用的技术,可以帮助我们在会议记录中省去手动记录,在采访中迅速得到文字稿,在学习中快速生成课堂笔...运用十分广泛。但是很多人不知道要怎么转换,在这里我便给大家介绍几款效率非常高的语音转文字的工具…...
解决 Git 访问 GitHub 时的 SSL 错误
引言 在使用 Git 进行版本控制时,我们可能会遇到各种网络相关的错误。其中一种常见的错误是 SSL 连接问题,这会导致 Git 无法访问远程仓库。本文将介绍一个具体的错误 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0,以及如何通过禁用 SSL 证…...
LinuxCentos中安装apache网站服务详细教程
🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧Linux高级管理防护和群集专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️创作…...
LUA脚本改造redis分布式锁
在redis集群模式下,我们会启动多个tomcat实例,每个tomcat实例都有一个JVM,且不共享。而synchronize锁的作用范围仅仅是当前JVM,所以我们需要一个作用于集群下的锁,也就是分布式锁。(就是不能用JVM自带的锁了…...
web端使用HTML5开发《贪吃蛇》小游戏教程【附源码】
自制游戏列表 1植物大战僵尸自制HTML5游戏《植物大战僵尸》2开心消消乐自制HTML5游戏《开心消消乐》3贪吃蛇自制HTML5游戏《贪吃蛇》4捕鱼达人自制HTML5游戏《捕鱼达人》 一、游戏简介 贪吃蛇是一款经典的电子游戏,最早在1976年由Gremlin公司推出,名为…...
Selenium使用教程-Selenium环境搭建与基础操作
Selenium环境搭建与基础操作 1. 引言:Selenium简介 Selenium,作为自动化测试领域的明星工具,以其强大的跨浏览器测试能力而闻名。它支持多种编程语言(如Java、Python、C#等),允许开发者编写脚本来模拟真…...
1950年-2021年中国历年民航航线里程统计报告
数据为1950年到2021年我国每年的民航航线总里程数据。 2021年,我国定期航班航线总里程为689.78万公里,相比2019年下降了258.44万公里。 数据统计单位为:公里. 数据说明: 2011年起民航航线里程改为定期航班航线里程 我国定期航班…...
前端了解到框架-网络复习
前端 HTML 超文本标记语言 画页面 各种各样的标签组成页面进行展示 桌面创建文本修改后缀即可 <!DOCTYPE html>: 声明文档类型和HTML版本。<html>: 根标签,所有其他标签都包含在内。<head>: 包含了文档的元数据,如字符编码、网页标…...
防火墙——网络环境支持
目录 网络环境支持 防火墙的组网 web连接上防火墙 web管理口 让防火墙接到网络环境中 编辑 管理员用户管理 缺省管理员 接口 配置一个普通接口 创建安全区域 路由模式 透明模式 混合模式 防火墙的安全策略 防火墙转发流程 与传统包过滤的区别 创建安全策略 …...
阅读笔记:明朝那些事儿之拐弯中的帝国
万历皇帝时期内阁首辅: 张居正,申时行,王锡爵,许国,王家屏,赵志皋(给皇帝写辞职信没有回音,自己不告而回家),沈一贯,于慎行,叶向高…...
React基础知识 精简全面 推荐
这篇博文主要对一些刚入门react框架的同学,以及对react基本知识进行巩固的,最后就是精简一下基本知识,以方便自己查看,感谢参考,有问题评论区交流,谢谢。 目录 1.JSX 2.Props 和 State 3.组件生命周期…...
OV SSL证书申请指南
OV SSL证书除了验证域名所有权外还需要验证组织信息,这类证书适用于对公司官网、品牌、安全性等有较高程度要求的企业级用户。具体申请流程如下: 一 、注册账号 注册账号填写230919注册码即可获得大额优惠券和全程一对一技术支持https://www.joyssl.co…...
变色树脂的变色原理?变色树脂在水处理中的应用?
变色树脂是一种具有特殊功能的高分子材料,能够在特定条件下改变其颜色,从而指示环境变化(如pH值、温度、特定离子浓度等)或反应进程。这类树脂通常含有能够响应特定刺激的化学结构,通过化学反应、离子交换、分子构象变…...
16 敏捷开发实践(1)
敏捷方法:是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法,是一种应对快速变化的需求的一种软件开发能力。 敏捷开发:是一种以人为核心、迭代、循序渐进的开发方法。 敏捷实践:精益软件开发(LSD&#x…...
如何使用虚拟机如何安装 Kali Linux ?
1.下载虚拟机:https://www.virtualbox.org/wiki/Downloads 选择你的系统版本 2.下载kali linux系统镜像:https://www.kali.org/get-kali/#kali-virtual-machines 全部下载完成后,我们会得到以下文件! 1.压缩Kali Linux压缩包 2.安…...
Yarn UI 时间问题,相差8小时
位置 $HADOOP_HOME/share/hadoop/yarn/hadoop-yarn-common-2.6.1.jar 查看 jar tf hadoop-yarn-common-2.6.1.jar |grep yarn.dt.plugins.js webapps/static/yarn.dt.plugins.js 解压 jar -xvf hadoop-yarn-common-2.6.1.jar webapps/static/yarn.dt.plugins.js inflated: we…...
【JavaWeb项目】——外卖订餐系统之登入、登入后显示餐品信息、用户注册、注销部分
🎼个人主页:【Y小夜】 😎作者简介:一位双非学校的大二学生,编程爱好者, 专注于基础和实战分享,欢迎私信咨询! 🎆入门专栏:🎇【MySQL࿰…...
怎么保护电脑文件夹?文件夹保护方法大盘点
文件夹是管理电脑数据的重要工具,可以有效避免数据混乱。而为了避免文件夹数据泄露,我们需要严格保护文件夹。下面我们就来盘点一下文件夹的保护方法。 文件夹隐藏 隐藏文件夹是一种简单有效的保护方式,通过隐藏文件夹来避免其他人发现&…...
Temporal(时效)模式01
Andy Carlson, Sharon Estepp, Martin Fowler 著,透明 译 抽象 在面向对象设计中,我们不断使用“对象”(object)这个词。对象不仅仅用来表现真实世界中存在的物件,它们也被用来表现那些曾经存在但已经消失了的物件&…...
C语言 -- 动态内存管理
C语言 -- 动态内存管理 1. 为什么要有动态内存分配2. malloc 和 free2.1 malloc2.2 free 3. calloc 和 realloc3.1 calloc3.2 realloc 4. 常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动…...
docker 篇
简单描述下,有时候真的要熟练,否者上了生产真的不知所措。 背景:有个项目上线了,依赖的项目没有上线,因此需要紧急发布,发现:打包环境有问题,第一、架构不一致,第二、环…...
汽车、能源、烟草、电力行业洞见:TDengine 用户大会亮点荟萃
近年来,随着物联网、车联网、工业互联网等前沿技术的迅猛发展,全球数据量呈指数级增长。作为大数据的一个重要组成部分,时序数据因其在实时监控、预测分析和智能决策中的独特优势,正逐步成为数字化转型的关键要素。尤其在 AI 时代…...
从零开始编写一个Chrome插件:详细教程
个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119@qq.com] 📱个人微信:15279484656 🌐个人导航网站:www.forff.top 💡座右铭:总有人要赢。为什么不能是我呢? 专栏导…...
photoshop学习笔记——选区3 快速选择工具
快速选择工具 W shift W 在3种快速选择工具之间切换 对象选择工具 photoshop CC中没有这个工具,利用AI,将款选中的对象快速的提取选区,测试了一下,选区制作的非常nice快速选择工具 跟磁性套索类似,自动识别颜色相似…...
Centos7下安装配置最新版本Jenkins
1、基础环境配置 1.1 服务器下载Jenkins安装包 下载地址:Download and deploy 下载命令:wget https://get.jenkins.io/war-stable/2.452.3/jenkins.war 1.2 服务器安装配置JDK Jenkins 是基于 Java 语言开发的,因此需要 Java 运行环境支…...