React-Koa-SBase [Superproject Base]

独白

技术是用来解决问题的 所以技术框架是要解决一系列问题的 ... 往往在解决问题的过程中又产生了新的问题，所以... 不断的解决问题...生产问题...再解决..再生产... It's my life.

核心扩展

middlewares [client|server]
routers [client|server] - features
modules [client|server]

运行

建议：中国用户建议使用cnpm加速下载依赖

npm i cnpm -g

如果安装了cnpm可以把👇的npm i改成cnpm i执行 运行example

cd superproject && npm i
npm start

在浏览器打开：http://localhost:3000/about

技术栈(计划使用)

组件化 - React 状态管理 - Redux 路由 - React-Router 同构 - React RenderToString Style导入 - wapper-css-loader 打包工具 - webpack2 组件库 - Material-UI CSS编译 - Sass ES6\7编译 - Babel

单元测试 - Mocha

HTTP服务 - Koa2 静态服务器 - 七牛云 缓存服务 - Redis 数据库 - MongoDB

NodeJS进程管理 - PM2 HTTP反向代理 - Nginx

环境容器 - Docker

代码管理 - Git 持续集成 - Jenkins

接口

Client

import { redux, router, createConfigureStore, run } from 'superproject/client'

client.redux.use() redux中间件
client.redux.reducer.use() redux的reducer挂载
client.router.use() react-router挂载
client.run()

Server

import { middleware, router, commonMiddlewares, run } from 'superproject/server'

server.middleware.use() koa-middleware中间件
server.router.use() koa-router挂载
server.run()

相关

服务端中间件(Koa)

Middleware | Description ----|------ react-isomorphic-koa-middleware | React在服务端渲染的中间件

客户端中间件(React)

Hoc：High Order Component 高级组件

Hoc | Description ----|------|---- react-import-style | 辅助组件加载样式

webpack-loader

Loader | Description ----|------|---- wrapper-css-loader | 把css外包一层class，避免命名冲突