一个还不错的 React 全家桶 Demo（后续发详细搭建步骤）_React

上一篇: React 作为一个 UI 运行时（一、... 下一篇:react 0.14 更新摘要

一个还不错的 React 全家桶 Demo（后续发详细搭建步骤）

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了一个还不错的 React 全家桶 Demo（后续发详细搭建步骤），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

react-demo(娃哈哈商城)
GIThub地址：https://github.com/Aemple/rea...  欢迎Star
技术栈
前端
???? react + redux + react-router + react-router-redux + webpack + ES6 + sass
后端
&#x270f;️ Node(exPress)
项目预览


运行项目
git clone https://github.com/Aemple/rea...
cd react-demo
npm i  或者运行  yarn(推荐)
npm start
cd server
node 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官方文档 ^_^
前后端交互技巧
@H_201_126@
定义仓库中的数据结构
去后台实现这个接口
前台编写一个请求此接口的API方法
定义action-types,修改reducer并处理此动作
编写一个action方法，用来调用API方法，请求接口，并得到返回的数据，构造action派发给仓库
在组件里调用此方法,并且填 充仓库
在组件使用此数据进行渲染

说明
开发环境 window10  Chrome 65  nodejs 8.12.0如果觉得不错的话，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR ????

Github地址：https://github.com/Aemple/rea...  欢迎Star
滴滴出行找实习生啦