项目结构

了解 React 项目的典型结构可以帮助你更好地组织代码。

基本项目结构

一个典型的 React 项目包含以下目录和文件：

my-react-app/
├── public/              # 静态资源
│   ├── index.html      # HTML 模板
│   └── favicon.ico     # 网站图标
├── src/                 # 源代码
│   ├── components/     # 可复用组件
│   ├── pages/          # 页面组件
│   ├── styles/         # 样式文件
│   ├── utils/          # 工具函数
│   └── App.tsx         # 根组件
├── package.json        # 项目配置
└── tsconfig.json       # TypeScript 配置

关键目录说明

src/components

存放可复用的 UI 组件。每个组件应该有自己的目录，包含组件文件和样式。

components/
├── Button/
│   ├── Button.tsx
│   ├── Button.test.tsx
│   └── Button.module.css
└── Header/
    ├── Header.tsx
    └── Header.module.css

src/pages

存放页面级组件。每个文件对应一个路由。

src/utils

存放工具函数和辅助代码。

src/styles

全局样式、主题配置和 CSS 变量。

最佳实践

• 按功能组织：将相关的组件、样式和逻辑放在一起
• 命名规范：使用清晰、一致的命名约定
• 避免深层嵌套：保持目录结构扁平
• 分离关注点：将 UI、逻辑和样式分离

文件命名约定

• 组件文件使用 PascalCase：Button.tsx
• 工具文件使用 camelCase：formatDate.ts
• 样式文件与组件同名：Button.module.css
• 测试文件添加 .test 或 .spec 后缀

下一步

了解项目结构后，继续学习JSX 简介。