基于git开源库:https://github.com/bodyno/react-starter-kit
.
├── 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 # 单元测试
所有的css和sass都支持会被预处理。只要被引入,都会经过PostCSS压缩,加前缀。在生产环境下会提取到一个css文件下。
这个项目的服务端使用Koa。需要注意的是,只有一个目的那就是提供了webpack-dev-middleware
和 webpack-hot-middleware
(代码热替换)。使用自定义的Koa程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。
Babel被配置babel-plugin-transform-runtime可以让代码更优化。另外,在生产环境,我们使用react-optimize来优化React代码。
在生产环境下,webpack会导出一个css文件并压缩Javascript,并把js模块优化到最好的性能。
如果你正在使用nginx处理程序,确保所有的路由都直接指向 ~/dist/index.html
文件,然后让react-router处理剩下的事。如果你不是很确定应该怎么做,文档在这里。Express在脚手架中用于扩展服务和代理API,或者其它你想要做的事,这完全取决于你。
如果没有大家的贡献,这个项目是不可能诞生的, 感谢所有为这个项目做出贡献的人。
This program is inspired by davezuko
Thanks you guys all the time.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。