React工程实践：基于React、Redux、React-Router的前端脚手架

项目地址: https://github.com/YutHelloWo...

基于React、Redux、React-Router@3.x、webpack和reactstrap的前端脚手架。

目录

• 前言
• 特性
• 环境
• 开始
• 工程结构
• 开发调试
• 单元测试
• 静态部署
• 相关文档
• 致谢

前言

如果你是一个Reat初学者，这个项目可以是很好的教程。如果你在计划使用React技术栈创建一个大型SPA，那么这个项目正好适合你。如果这个项目对你有帮助，请不吝啬的给于star或者watch支持。

特性

• ES2015
• Webpack
• Redux
• React-router
• reactstrap
• Eslint
• Express
• Babel
• Karma

数据流

环境

• node ^5.0.0
• yarn ^0.23.0 or npm ^3.0.0

开始

在确认你的开发环境是以上环境配置，就开始可以基于这个脚手架创建你的应用了:

首先，克隆这个工程。

$ git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name>
$ cd <my-project-name>

然后，安装工程依赖。推荐使用cnpm或Yarn，这样可以节约你安装依赖的所需的时间，避免出现一些莫名奇妙的错误。

$ yarn  # Install project dependencies (or `npm install` or `cnpm install`)

最后，使用命令yarn start或者npm start来启动该应用。

$ yarn start  # Start the development server (or `npm start`)

这里还有一些其他的处理命令:

工程结构

.
├── build           # 打包配置
├── public          # 公共静态资源
├── server          # express服务
│  └── main.js        # 服务入口js
├── src            # 应用源文件
│  ├── index.html      # html模板
│  ├── main.js        # 程序启动和渲染
│  ├── normalize.js     # 浏览器的兼容和垫片
│  ├── components      # 全局可复用组件
│  ├── layouts        # 主页布局
│  │  └── PageLayout    # 导航
│  ├── routes        # 动态路由
│  │  ├── index.js     # 主路由
│  │  ├── Home       # 子路由Home
│  │  │  ├── index.js   # 路由定义和异步加载
│  │  │  ├── assets    # 组件的静态文件
│  │  │  ├── components  # 展示组件
│  │  │  └── routes **   # 子路由
│  │  └── Counter      # 子路由Couner
│  │    ├── index.js   # 路由定义
│  │    ├── container   # 容器组件
│  │    ├── modules    # module(reducers/constants/actions)
│  │    └── routes **   # 子路由
│  ├── store         # Redux相关模块
│  │  ├── createStore.js  # 创建和使用redux store
│  │  └── reducers.js    # Reducer的注册和注入
│  └── styles        # 样式表
└── tests           # 单元测试

开发调试

在开发环境，采用了web-dev-middleware和web-hot-middleware。代码实时热更新。

Redux DevTools

强烈推荐安装谷歌浏览器插件Redux DevTools Chrome Extension,来查看整个应用的状态时光穿梭。

路由

我们使用React-router的plainRoute来定义应用的逻辑单元。

单元测试

新增一个单元测试，你只需在./tests中创建.spec.js文件。

静态部署

如果你通过nginx web 服务来启动应用，请确保路由指向~/dist/index.html，然后让react-router处理剩下的事，更多参考这个文档。Express在脚手架中用于扩展服务和代理API。

相关文档

知识地图

致谢

欢迎给这个项目提PR或者issues

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!