m.proto React+Flux项目结构示例

m.proto 的 React+Flux 项目结构挺清爽的,适合想上手 Flux 架构的你玩一玩。里面用了点老牌工具,比如 Bower 和 Grunt,虽然现在用得不多了,但理解下项目流程还是蛮有的。clone 下来跑一跑,感受一下组件和 Store 之间的数据流动,挺直观的。

安装依赖也不复杂,照着 README 来一遍,npm install搞定后,grunt serve --f就能跑起来。页面结构比较经典,用的是 Flux 的 Action-Dispatcher-Store 套路,对照着代码和流程图看,会更清晰。

如果你对 Flux 还不太熟,可以参考这几个案例:React + Flux 用户管理示例,或者看看react-flux-demo,更好地理解怎么拆组件、怎么触发事件、怎么更新视图。

嗯,还有一点要注意,这项目有点老,webpack 都没用上,如果你习惯了现在的打包工具,会觉得略麻烦。不过当做学习用,倒是还不错的一套材料。如果你用的是 macOS,记得装完依赖后执行下sudo chown -R $USER /usr/local,不然有权限出问题。

zip 文件大小:570.96KB