React Starter 项目教程

1. 项目的目录结构及介绍

React Starter 项目的目录结构如下：

react-starter/
├── .github/               # GitHub Actions 工作流文件
├── .husky/                # Husky 配置文件，用于 Git 钩子
├── .vscode/               # VSCode 项目配置
├── public/                # 公共静态文件，如图片、字体等
├── src/                   # 源代码目录
│   ├── common/            # 公共模块，如认证、工具等
│   ├── components/        # React 组件
│   ├── App.tsx            # 应用主组件
│   ├── index.html         # 应用入口 HTML 文件
│   └── ...                # 其他源代码文件
├── .editorconfig           # 编辑器配置文件
├── .env                   # 环境变量配置文件
├── .eslintrc.cjs          # ESLint 配置文件
├── .gitignore             # Git 忽略文件
├── .npmrc                 # npm 配置文件
├── .prettierrc            # Prettier 配置文件
├── .prettierignore        # Prettier 忽略文件
├── LICENSE                # 项目许可证文件
├── README.md              # 项目说明文件
├── components.json        # 组件配置文件
├── i18next-parser.config.ts # i18next 解析器配置文件
├── package-lock.json      # npm 锁定文件
├── package.json           # npm 包配置文件
├── postcss.config.js      # PostCSS 配置文件
├── tailwind.config.ts     # Tailwind CSS 配置文件
├── tsconfig.json          # TypeScript 配置文件
├── tsconfig.node.json     # TypeScript 节点配置文件
└── ...                    # 其他配置文件

每个目录和文件的作用在上面的注释中有简要说明。

2. 项目的启动文件介绍

项目的启动文件是 src/index.html 和 src/main.tsx。

• src/index.html：这是应用的入口 HTML 文件，它包含了应用的根组件 App 的挂载点。

• src/main.tsx：这是 React 应用的主组件文件，它导入了 App 组件，并将其挂载到 index.html 中的挂载点。

启动项目时，运行以下命令：

npm start

这会启动 Vite 开发服务器，并在 http://localhost:3000 地址上提供应用的开发版本。

3. 项目的配置文件介绍

项目中有多个配置文件，以下是一些主要的配置文件介绍：

• .editorconfig：编辑器配置文件，用于定义代码风格，如缩进、换行符等。

• .eslintrc.cjs：ESLint 配置文件，用于定义代码质量和风格规则。

• .prettierrc：Prettier 配置文件，用于定义代码格式化规则。

• tailwind.config.ts：Tailwind CSS 配置文件，用于定义 Tailwind 的配置，如颜色、样式等。

• postcss.config.js：PostCSS 配置文件，用于定义 PostCSS 的插件和配置。

• tsconfig.json：TypeScript 配置文件，用于定义 TypeScript 编译器的选项。

这些配置文件确保了代码的一致性和风格，有助于维护代码质量和开发效率。