CWG React 启动器教程

本教程旨在指导您如何快速上手并理解 CWG React Starter 这一预配置好的React应用程序模板。此项目设计用于帮助开发者省去新项目设置中的常规步骤，确保您可以立即开始开发。

1. 目录结构及介绍

CWG React Starter 遵循了一种精心规划的目录架构，以促进大型React应用的可维护性和可扩展性。下面是主要的目录结构及其功能说明：

• src/
  • main/: 包含核心配置，如Redux的创建、Axios实例、以及路由定义。
    • axios/: 存放Axios的配置和拦截器。
    • routes/: 包括所有应用路由，包括私有路由的配置。
    • store/: Redux store和主reducer所在。
  • modules/: 按功能或模块组织代码，每个模块都有其视图、逻辑、样式等。
    • 例如，Dashboard/ 内含仪表板相关的组件、样式和逻辑。
  • library/<: 共享资源如组件、辅助函数等，进一步分为common和utilities子目录，便于复用。
    • components/: 通用组件，如Header。
    • actions/, reducers/, utils/: 分别用于集中处理应用动作、状态管理和实用工具函数。
  • resources/<: 静态资源存放处，如图片、样式变量、字体等。
  • styles/< 和其他支持的配置文件（如.eslintrc.json, .prettierrc, jsconfig.json）也位于根目录下，用于代码质量和格式化。

2. 项目启动文件介绍

在本项目中，并没有特定指明一个“启动文件”，但项目通常通过npm或yarn脚本来管理启动流程。运行应用前，您首先需克隆仓库然后安装依赖：

git clone https://github.com/gkhan205/cwg-react-starter.git
cd cwg-react-starter
npm install 或 yarn

之后，可以通过以下命令启动开发服务器：

npm start 或 yarn start

这将自动打开浏览器并展示应用。启动过程依赖于Create React App的默认配置，除非另有自定义。

3. 项目配置文件介绍

.gitignore

记录了不应被纳入版本控制系统的文件类型或路径，比如IDE生成的文件、node_modules目录等。

.eslintrc.json

包含ESLint的规则设置，用于代码风格的一致性检查。

.prettierrc

定义了Prettier的代码格式化规则，自动化代码风格统一。

package.json

核心配置文件，列出项目的依赖项、scripts命令、版本信息等。是管理项目生命周期操作的中心点。

jsconfig.json

提供JavaScript项目的配置，帮助编辑器更好地理解项目结构，提高代码补全和导航能力。

其他配置

• src/jsconfig.json: 若存在，可能用于细化源码目录的配置。
• src/routes/index.js: 路由配置文件，定义应用的动态路径和对应的组件映射。
• src/store/index.js: Redux的核心配置，初始化store和中间件。

通过以上结构和配置，CWG React Starter 提供了一个高效、规范的起点，让开发者可以专注于业务逻辑的实现，而无需从零搭建基础环境。