React 示例项目列表

17 min read

示例项目列表

在进入具体的实战篇之前,先交代下后面实战篇中会涉及的示例项目:

  1. 基础脚手架:react-boilerplate

  2. 企业管理系统脚手架:react-boilerplate-pro

  3. 侧边栏组件:react-sider

  4. 包含鉴权的路由:react-acl-router

  5. 国际化多语言文件注入:react-intl-context

这其中前两个是完整的示例项目,在把项目 clone 到本地后根据 README.md 文件中的指导就可以运行起来。后三个是企业管理系统中常用模块的组件抽象,全部都应用在了 react-boilerplate-pro 项目中,推荐搭配着 demo 一起研究。

Node.js

笔者本地的 Node.js 版本是 8.11.3。推荐使用 8.10.09.10.0 以上的版本,否则将不能够兼容 ESLint 当前最新的 5.0 版本。

包管理工具

各位在安装项目依赖时可以使用默认的 npm,但在这里推荐使用 Yarn 作为项目的包管理工具,在所有的项目中也都提供了相应的 yarn.lock 文件。这样可以确保大家使用的第三方依赖与笔者本地的保持一致,而且 Yarn 自身强大的 cache 功能也可以在重复安装相同依赖时起到一定的加速作用。

第三方依赖

所有项目中需要用到的第三方依赖都在项目的 package.json 以及 yarn.lock 中有所体现,大家使用 yarn install(或 npm install)安装即可。

这里列出一些使用的重要依赖的版本,供大家参考:

  • 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

示例项目会定时对使用的第三方依赖进行升级,但因为第三方依赖的更新速度较快,所以上面列出的第三方依赖版本可能会与实际示例项目中的有所出入,一切以实际示例项目中的 package.jsonyarn.lock 为准。

拓展学习资料

  1. AlanWei/blog:笔者的 GitHub 博客,里面有更多关于 React、组件库、前端数据层、服务端渲染的资料。

  2. pure render:阿里数据中台前端团队分享前端相关经验。

  3. 前端精读评论:阿里数据中台前端团队分享前端界的好文精读。

  4. 前端新能源:分享前端有深度的新思想和新方法。

  5. 蚂蚁金服体验科技:探索极致用户体验与最佳工程实践。