Universal React Starter Kit
效劳端衬着的React手脚架
这个启动包的设想是为了让你运用一整套最新最酷的前端手艺，一切都是可设置，富特征，基于webpack已供应代码热加载，运用sass预处置惩罚css，单元测试，代码覆蓋率报告，代码支解等等更多。
这个项目最主要的目标是尽量坚决的保存。目标不是要你肯定根据这个构造去完成你的项目，谐在使前端开辟更硬朗，更简朴另有最主要的是更快活。你能够获得以下的一切特征！
末了，假如没有人人的孝敬，这个项目是不可能云云硬朗的，所以，谢谢人人。
以为不错的话，请Star一下本项目，这是对作者最大的支撑。
一切相干库已准备好，随时守候挪用。
特征
需求设置
node
^4.5.0npm
^3.0.0
最先
确认好你的环境设置，然后就能够最先以下步骤。
$ git clone https://github.com/bodyno/react-starter-kit.git
$ cd react-starter-kit
$ npm install # Install project dependencies
$ npm start # Compile and launch假如一切顺利，你会看到以下:
<img src=”http://i.imgur.com/zR7VRG6.pn… />
开辟过程当中，你用得最多的会是npm start，然则这里另有许多别的的处置惩罚：
npm run <script> | 诠释 |
|---|---|
start | 效劳启动在3000端口，代码热替代开启。 |
compile | 编译顺序到dist目次下（默许目次~/dist）。 |
dev | 与npm start雷同, 然则启动nodemon保卫历程。 |
dev:no-debug | 与npm run dev 然则禁用devtool（开辟工具）。 |
test | 开启Karma测试并天生覆蓋率报告。 |
test:dev | 开启Karma测试并监听转变随时从新测试，然则天生覆蓋率报告。 |
deploy | 启动代码搜检，测试，假如胜利，编译到dist目次下。 |
deploy:dev | 与deploy雷同，然则NODE_ENV值为”development”。 |
deploy:prod | 与deploy雷同，然则NODE_ENV值为”production”。 |
lint | 搜检一切.js文件是不是范例。 |
lint:fix | 搜检一切.js文件是不是范例并修复它们。 更多 |
顺序目次
这个项目标构造运用的是 fractal(不规则碎片形：合适大型项目)*，要领的分组主如果遵照特征而不是文件范例。注重，这个目次构造只是一个指引，并不肯定要按这个来。这类构造谐在让顺序更轻易扩大，想相识更多请点击这里。
.
├── bin # 启动剧本
├── blueprints # redux-cli的蓝图
├── build # 一切打包设置项
│ └── webpack # webpack的指定环境设置文件
├── config # 项目设置文件
├── server # Koa 顺序 (运用 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，或许别的你想要做的事，这完整取决于你。
谢谢人人
假如没有人人的孝敬，这个项目是不可能降生的， 谢谢一切为这个项目做出孝敬的人。
