React Starter Kit 项目教程

React Starter Kit 项目教程

react-starter-kit Start your first React App. By using React, Redux, and React-Router. 项目地址: https://gitcode.com/gh_mirrors/reac/react-starter-kit

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

React Starter Kit 项目的目录结构设计遵循了 Fractal（不规则碎片形）方法，主要按照特性而不是文件类型进行分组。以下是项目的主要目录结构及其介绍：

├── bin # 启动脚本
├── blueprints # redux-cli 的蓝图
├── build # 所有打包配置项
│   └── webpack # webpack 的指定环境配置文件
├── config # 项目配置文件
├── server # Express 程序 (使用 webpack 中间件)
│   └── main.js # 服务端程序入口文件
├── src # 程序源文件
│   ├── main.js # 程序启动和渲染
│   ├── components # 全局可复用的表现组件(Presentational Components)
│   ├── containers # 全局可复用的容器组件
│   ├── layouts # 主页结构
│   ├── static # 静态文件(不要到处 imported 源文件)
│   ├── styles # 程序样式
│   ├── store # Redux 指定块
│   │   ├── createStore.js # 创建和使用 redux store
│   │   └── reducers.js # Reducer 注册和注入
│   └── routes # 主路由和异步分割点
│       ├── index.js # 用 store 启动主程序路由
│       ├── Root.js # 为上下文 providers 包住组件
│       └── Home # 不规则路由
│           ├── index.js # 路由定义和代码异步分割
│           ├── assets # 组件引入的静态资源
│           ├── components # 直观 React 组件
│           ├── container # 连接 actions 和 store
│           ├── modules # reducers/constants/actions 的集合
│           └── routes ** # 不规则子路由(** 可选择的)
└── tests # 单元测试

目录结构说明：

• bin: 包含项目的启动脚本。
• blueprints: 包含 redux-cli 的蓝图文件。
• build: 包含所有打包配置项，特别是 webpack 的配置文件。
• config: 包含项目的配置文件。
• server: 包含 Express 程序的源文件，主要用于提供 webpack 中间件。
• src: 包含程序的主要源文件，包括启动文件、组件、样式、Redux 相关文件和路由等。
• tests: 包含项目的单元测试文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 src 目录下，特别是 src/main.js 文件。以下是启动文件的介绍：

src/main.js

这是项目的入口文件，负责启动和渲染 React 应用程序。它通常会包含以下内容：

• 初始化 Redux store。
• 配置 React Router。
• 渲染应用程序到 DOM 中。

server/main.js

这是服务端的入口文件，使用 Express 提供 webpack 中间件，主要用于开发环境下的代码热替换和生产环境下的静态文件服务。

3. 项目的配置文件介绍

项目的配置文件主要位于 config 和 build 目录下。以下是主要配置文件的介绍：

config 目录

• 项目配置文件: 包含项目的全局配置，如环境变量、端口配置等。

build/webpack 目录

• webpack 配置文件: 包含 webpack 的配置文件，用于打包和优化前端资源。根据不同的环境（开发、生产）有不同的配置文件。

其他配置文件

• .babelrc: Babel 配置文件，用于转换 ES6+ 代码。
• .eslintrc: ESLint 配置文件，用于代码风格检查。
• .editorconfig: 编辑器配置文件，用于统一代码风格。

通过以上配置文件，项目可以灵活地适应不同的开发和生产环境，确保代码的质量和性能。

react-starter-kit Start your first React App. By using React, Redux, and React-Router. 项目地址: https://gitcode.com/gh_mirrors/reac/react-starter-kit