react-demo(娃哈哈商城)Github地址:https://github.com/Aemple/rea… 欢迎Star技术栈前端???? react + redux + react-router + react-router-redux + webpack + ES6 + sass后端✏️ Node(express)项目预览运行项目git clone https://github.com/Aemple/rea...cd react-demonpm i 或者运行 yarn(推荐)npm startcd servernode app.js 或者 nodemon app.js(推荐)目录结构划分src containers 放置页面组件比如说Home components 放此页面组件独享的子组件 components 放置页面之间可以共享的共用组件 common 放一些公共的样式等内容 images 放图片 store redux仓库 reducers actions action-types index index.js入口文件 index.html 模板文件redux结构个人感悟(重难点)装饰器使用能简化业务代码,让代码结构更清晰注意提升页面性能(项目中:分流加载、防抖等)刷新页面机制受保护路由(在没有登录的情况下不能访问个性推荐、个人中心界面会跳转到登录界面)刷新后登录状态获取(公共页面获取状态)react-router-redux 页面路由、状态数据统一(后续写一个源码剖析)????????????注意!!! 本人新做了一个React小项目,新版本也就是bable7中装饰器需要配置另外的插件 详细请查看bable官方文档 ^^前后端交互技巧定义仓库中的数据结构去后台实现这个接口前台编写一个请求此接口的API方法定义action-types,修改reducer并处理此动作编写一个action方法,用来调用API方法,请求接口,并得到返回的数据,构造action派发给仓库在组件里调用此方法,并且填 充仓库在组件使用此数据进行渲染说明开发环境 window10 Chrome 65 nodejs 8.12.0如果觉得不错的话,您可以点右上角 “Star” 支持一下 谢谢! ^^如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR ????Github地址:https://github.com/Aemple/rea… 欢迎Star滴滴出行找实习生啦