首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  前端开发

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

  •  1
     
  •   Aemple · 38 天前 · 980 次点击
    这是一个创建于 38 天前的主题,其中的信息可能已经有所发展或是发生改变。

    react-demo(娃哈哈商城)

    地址: https://github.com/Aemple/react-demo 欢迎 Star

    技术栈

    前端

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

    后端

    ✏️ Node(express)

    项目预览

    Alt text Alt text

    运行项目

    git clone https://github.com/Aemple/react-demo

    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 👍

    地址: https://github.com/Aemple/react-demo 欢迎 Star

    4 回复  |  直到 2019-03-18 14:41:57 +08:00
        1
    Aemple   38 天前
    本人大三 目前滴滴出行实习 有需要的小伙伴可以联系我投简历哦 还有 hc
        2
    Aemple   37 天前
    顶顶 不能沉啊
        3
    Aemple   37 天前
    大佬们 来简历啊 部门技术栈是 Vue
        4
    Tomotoes   33 天前 via Android
    同是大三学生,目前正在准备考试
    Github github.com/tomotoes
    求实习岗位
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2181 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 04:33 · PVG 12:33 · LAX 21:33 · JFK 00:33
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1