0
点赞
收藏
分享

微信扫一扫

徒手用React撸一个项目

清冷的蓝天天 2021-09-28 阅读 38
技术

开篇准备

Node 版本

  • 8.11.3
  • npm、yarn

第三方依赖

  • react: 16.4.2
  • react-dom: 16.4.2
  • redux: 4.0.0
  • redux-thunk: 2.3.0
  • react-router-dom: 4.3.1
  • connected-react-router: 4.3.0
  • antd: 3.6.6
  • webpack: 4.16.5
  • babel-core: 6.26.3
  • eslint: 5.3.0
  • jest: 23.4.2

开始

HTML

  • 添加viewport属性:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • EJS变量注入:
    <title><%= htmlWebpackPlugin.options.title %></title>

CSS

Babel

  • presets
  • plugins

webpack 配置

ESLint 配置

  • .eslintrc

目录组织结构

  • layouts/: 存放布局级别的组件
  • views/: 存放页面级别的组件
  • components/: 存放业务级别的 UI 组件
  • hocs/: 存放业务级别的逻辑组件(看情况可与 components/ 合并,但建议分开)
  • app/: 存放应用级别的配置信息,如菜单、路由等,以及应用初始化的相关代码,如初始化 redux store 等
  • utils/: 存放通用的功能性函数,如数据聚合、处理等
  • styles/: 存放全局的 CSS 样式、变量、mixins 等
  • assets/: 存放静态资源,如图标、图片等
  • i18n/: 存放应用国际化需要的多语言文件

redux

  • 全局数据源且其他组件可以直接获取/改变全局数据源中的数据
  • 全程跟踪/管理 action 的分发过程/顺序

redux-thunk

  • 局数据源且其他组件可以直接获取/改变全局数据源中的数据
  • 全程跟踪/管理 action 的分发过程/顺序
  • 我需要组件对同步或异步的 action 无感,调用异步 action 时不需要显式地传入 dispatch

redux-saga

  • 全局数据源且其他组件可以直接获取/改变全局数据源中的数据
  • 全程跟踪/管理 action 的分发过程/顺序
  • 组件对同步或异步的 action 无感,调用异步 action 时不需要显式地传入 dispatch
  • 来表述复杂异步数据流(如长流程表单、请求失败后重试等),命令式的 thunk 对于复杂异步数据流的表现力有限

    1. AlanWei/blog:笔者的 GitHub 博客,里面有更多关于 React、组件库、前端数据层、服务端渲染的资料。
    1. pure render:阿里数据中台前端团队分享前端相关经验。
    1. 前端精读评论:阿里数据中台前端团队分享前端界的好文精读。
    1. 前端新能源:分享前端有深度的新思想和新方法。
  1. 蚂蚁金服体验科技:探索极致用户体验与最佳工程实践。
举报

相关推荐

0 条评论