基于React、Redux、React-Router@3.x、webpack和reactstrap的前端脚手架。
目录
前言
如果你是一个Reat初学者，这个项目可以是很好的教程。如果你在计划使用React技术栈创建一个大型SPA，那么这个项目正好适合你。如果这个项目对你有帮助，请不吝啬的给于star或者watch支持。
特性
数据流
环境
- node
^5.0.0 - yarn
^0.23.0or 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`)
这里还有一些其他的处理命令:
yarn <script> |
描述 |
|---|---|
start |
启动并热更新 http://localhost:3000 |
build |
构建到目录 ./dist |
test |
通过Karma执行单元测试 |
test:watch |
代码改变时通过监控模式重新执行单元测试 |
lint |
代码检查 |
lint:fix |
代码检查并修复 |
工程结构
. ├── 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。
