脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

react-demo(娃哈哈商城)

Github地址:https://github.com/Aemple/rea... 欢迎Star

技术栈

前端

???? react + redux + react-router + react-router-redux + webpack + ES6 + sass

后端

✏️ Node(express)

项目预览

Alt text

Alt text

运行项目

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结构

Alt text

个人感悟(重难点)

装饰器使用能简化业务代码,让代码结构更清晰

注意提升页面性能(项目中:分流加载、防抖等)

刷新页面机制

受保护路由(在没有登录的情况下不能访问个性推荐、个人中心界面会跳转到登录界面)

刷新后登录状态获取(公共页面获取状态)

react-router-redux 页面路由、状态数据统一(后续写一个源码剖析)

????????????注意!!! 本人新做了一个React小项目,新版本也就是bable7中装饰器需要配置另外的插件 详细请查看bable官方文档 ^_^

前后端交互技巧

  1. 定义仓库中的数据结构
  2. 去后台实现这个接口
  3. 前台编写一个请求此接口的API方法
  4. 定义action-types,修改reducer并处理此动作
  5. 编写一个action方法,用来调用API方法,请求接口,并得到返回的数据,构造action派发给仓库
  6. 在组件里调用此方法,并且填 充仓库
  7. 在组件使用此数据进行渲染

说明

开发环境 window10 Chrome 65 nodejs 8.12.0

如果觉得不错的话,您可以点右上角 "Star" 支持一下 谢谢! ^_^

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR ????

Github地址:https://github.com/Aemple/rea... 欢迎Star

滴滴出行找实习生啦

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过