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

【React】项目的目录结构全面指南

news 2026/2/7 21:45:56

文章目录

    • 一、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();
};

三、最佳实践

  1. 模块化组织

将代码模块化是保持代码清晰和可维护的关键。将不同功能的代码分离到不同的目录中，有助于团队协作和代码的可读性。

  1. 避免过度嵌套

尽量避免目录结构过度嵌套，这会增加项目的复杂度和文件的查找难度。保持目录结构扁平化，有助于快速定位和修改代码。

  1. 合理命名

目录和文件的命名应简洁明了，反映其内容和用途。例如，components 目录下的文件应当命名为组件名称，utils 目录下的文件应当命名为工具函数名称。

  1. 统一风格

保持代码风格的一致性，有助于提高代码的可读性和团队协作效率。使用 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 项目时&#xff0c;良好的目录结构…...

编程日记 2024/7/30 16:08:24

Django学习（二）

get请求 练习&#xff1a; views.py def test_method(request):if request.method GET:print(request.GET)# 如果链接中没有参数a会报错print(request.GET[a])# 使用这个方法&#xff0c;当查询不到参数时&#xff0c;不会报错而是返回你设置的值print(request.GET.get(c,n…...

编程日记 2024/7/30 16:06:21

Java引用类型

强软弱虚 以 ZGC 为例&#xff0c;谈一谈 JVM 是如何实现 Reference 语义的 SoftReference 到底在什么时候被回收 &#xff1f; 如何量化内存不足 &#xff1f; PhantomReference 和 WeakReference 究竟有何不同 ThreadLocal 和 Netty ByteBuf中使用到的引用类型 https://w…...

编程日记 2024/7/30 16:04:18

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&#xff0c;然后重启Redis服务 比如…...

编程日记 2024/7/30 16:03:16

【odoo17 | Owl】前端js钩子调用列表选择视图

概要 在我们选择多对一或者多对多字段的时候&#xff0c;经常看到可以弹出列表弹窗让人一目了然的效果&#xff0c;效果如下&#xff1a; 那么&#xff0c;这种效果是odoo本身封装好的组件&#xff0c;我们在平时的前端界面开发的时候&#xff0c;既不是后端视图的情况下&#…...

编程日记 2024/7/30 16:02:15

MATLAB基础：函数与函数控制语句

今天我们继续学习Matlab中函数相关知识。 API的查询和调用 help 命令是最基本的查询方法&#xff0c;可查询所有目录、指定目录、命令、函数。 我们直接点击帮助菜单即可查询所需的API函数。 lookfor 关键字用于搜索相关的命令和函数。 如&#xff0c;我们输入lookfor inpu…...

编程日记 2024/7/30 16:00:12

2024.7.30 搜索插入位置（二分法）

题解 二分法 left和right标记二分区间 ans标记n&#xff0c;因为存在大于所有数的可能。 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)…...

编程日记 2024/7/30 15:59:11

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 …...

编程日记 2024/7/30 15:58:10

小白学大模型：LLaMA-Factory 介绍与使用

最近这一两周看到不少互联网公司都已经开始秋招提前批了。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些球友…...

编程日记 2024/7/30 15:57:09

java算法day26

java算法day26 207 课程表208 实现Trie(前缀树) 207 课程表 这题对应的知识是图论里的拓扑排序的知识。从题意就可以感受出来了。题目说如果要学习某课程&#xff0c;那么就需要先完成某课程。 这里我描述比较复杂的情况&#xff1a;课程与课程之间也有可能是多对一的场景或者…...

编程日记 2024/7/30 15:54:04

docker笔记7-dockerfile

docker笔记7-dockerfile 一、dockerfile介绍二、dockerfile指令三、构建自己的镜像 一、dockerfile介绍 Dockerfile是用来构建Docker镜像的构建文件&#xff0c;是由一系列命令和参数构成的脚本。 以下是常用的 Dockerfile 关键字的完整列表和说明&#xff1a; 二、docker…...

编程日记 2024/7/30 15:52:02

Spring-cloud Alibaba组件--Dubbo

远程调用技术 RestFul风格 基于HTTP协议实现&#xff0c;而HTTP是一种网络传输协议&#xff0c;基于TCP&#xff0c;规定了数据传输的格式。 RPC协议 Remote Produce Call 远程过程调用&#xff0c;类似的还有 RMI &#xff08; remote method invoke&#xff09;。自定义数…...

编程日记 2024/7/30 15:51:01

右值引用--C++11

左值引用和右值引用 传统的C语法中就有引用的语法&#xff0c;而C11中新增了的右值引用语法特性&#xff0c;所以从现在开始我们 之前学习的引用就叫做左值引用。无论左值引用还是右值引用&#xff0c;都是给对象取别名。 什么是左值&#xff1f;什么是左值引用&#xff1f;…...

编程日记 2024/7/30 15:49:59

这样做外贸报价表，客户看了才想下单

报价&#xff0c;是外贸业务中最重要的一步&#xff0c;作为外贸人&#xff0c;不会做报价表可不行。有人说&#xff0c;直接在邮件里回复价格不就好了&#xff1f;是的&#xff0c;产品简单的可以这么做&#xff0c;但你也不能忽视报价表的价值&#xff0c;一份完美的价格表对…...

编程日记 2024/7/30 15:47:57

Swift学习入门，新手小白看过来

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…...

编程日记 2024/7/30 15:44:53

【Ant Design Pro】快速上手

初始化 初始化脚手架&#xff1a;快速开始 官方默认使用 umi4&#xff0c;这里文档还没有及时更新&#xff08;不能像文档一样选择 umi 的版本&#xff09;&#xff0c;之后我选择 simple。 然后安装依赖。 在 package.json 中&#xff1a; "start": "cross-e…...

编程日记 2024/7/30 15:43:52

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;带聚合函数的查询 …...

编程日记 2024/7/30 15:42:51

blender顶点乱飞的问题解决

初学blender&#xff0c;编辑模式下移动某些顶点&#xff0c;不管是移动还是滑动都会出现定点乱飞的问题&#xff0c;后来才发现是开了吸附工具的原因&#xff01;&#xff01;&#xff01;&#xff01; 像下面这样&#xff0c;其实我只是在Z轴上移动&#xff0c;但是就跑的很…...

编程日记 2024/7/30 15:41:50

Elasticsearch(ES) 集群脑裂

脑裂问题(split-brain problem)是指一个分布式系统中&#xff0c;当网络分裂&#xff08;network partition&#xff09;发生时&#xff0c;导致系统内部的两个或多个节点相互独立地认为自己仍然与其他节点连接&#xff0c;每个节点组都试图执行操作&#xff0c;这可能会导致数…...

编程日记 2024/7/30 15:37:45

spark 3.0.0源码环境搭建

环境 Spark版本&#xff1a;3.0.0 java版本&#xff1a;1.8 scala版本&#xff1a;2.12.19 Maven版本&#xff1a;3.8.1 编译spark 将spark-3.0.0的源码导入到idea中 执行mvn clean package -Phive -Phive-thriftserver -Pyarn -DskipTests 执行sparksql示例类SparkSQLExam…...

编程日记 2024/7/30 15:34:41

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/7 9:51:41

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/2/7 10:22:16