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

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

  •  
  •   Aemple · 2019-03-14 09:34:37 +08:00 · 3188 次点击
    这是一个创建于 1842 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    5 条回复    2019-08-05 15:54:04 +08:00
    Aemple
        1
    Aemple  
    OP
       2019-03-14 09:47:37 +08:00
    本人大三 目前滴滴出行实习 有需要的小伙伴可以联系我投简历哦 还有 hc
    Aemple
        2
    Aemple  
    OP
       2019-03-14 16:50:23 +08:00
    顶顶 不能沉啊
    Aemple
        3
    Aemple  
    OP
       2019-03-15 10:36:15 +08:00
    大佬们 来简历啊 部门技术栈是 Vue
    Tomotoes
        4
    Tomotoes  
       2019-03-18 14:41:57 +08:00 via Android
    同是大三学生,目前正在准备考试
    Github github.com/tomotoes
    求实习岗位
    Aemple
        5
    Aemple  
    OP
       2019-08-05 15:54:04 +08:00
    欢迎
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5319 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 08:10 · PVG 16:10 · LAX 01:10 · JFK 04:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.