React 生态圈
🌙
手机阅读
本文目录结构
React 生态圈
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库，是为了解决构建随着时间数据不断变化的大规模应用程序。
react 的生态体系比较庞大，它在 web 端，移动端，服务器端，VR 领域都有涉及。
react 可以说是目前为止最热门，生态最完善，应用范围最广的前端框架，虽说不能完虐 vuejs，但是设计理念还是超出 vue 很多的。
react 结合它的整个生态，它可以横跨 web 端，移动端，服务器端，乃至 VR 领域。
可以毫不夸张地说，react 已不单纯是一个框架，而是一个行业解决方案。
下面就来说说 react 庞大生态体系的构成。
注释：下面的 Star 和 Fork 值是在 年 12 月 1 日统计的；当你看到这篇文章的时候，他们可能已经变化了；因为它仅仅是作为参考作用的，所以阿西河没有对它进行动态调用；
该篇文章目前还没有整理好
应用
框架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| preact | 一个快速轻量的 React 替代方案，具有 ES6 API、组件化和虚拟 DOM | 22649 | 1176 |
| taro | 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用。 | 22580 | 2590 |
| react-native-web | 将 React Native 平台无关的组件和 API 搬到了 Web 上 | 15174 | 1250 |
| dva | 基于 React 和 redux 的轻量级框架 | 14078 | 2691 |
| relay | Relay 是一个 JavaScript 框架，用于构建数据驱动的 React 应用程序。 | 13738 | 1372 |
| reactxp | 微软推出的基于 React 和 React Native 的跨平台应用程序开发库。 | 7712 | 548 |
| react-static | 基于 React 的渐进式静态网站开发框架 | 7486 | 640 |
| refluxjs | 一个简单的单向数据流应用程序架构库，受 Flux 启发的 React 扩展 | 5429 | 357 |
| umi | 极快的类 Next.js 的 React 应用框架 | 6352 | 821 |
| react-web | 使用 React 构建 Web 应用程序的框架。 | 3405 | 481 |
| react-weui | 一套 react 的 weui 组件 | 2576 | 492 |
| react-snap | 一个零配置的静态 SPA 单页应用预渲染框架 2992 | 201 | |
| react-pwa | 基于 React 的 PWA 应用开发框架 | 2175 | 247 |
| react-starter-kit | 完美使用 React, Redux, and React-Router！好用的脚手架 | 1746 | 421 |
| Vulcan | 一个使用 React，GraphQL 和 Meteor 快速构建应用的工具包 | 7689 | 2055 |
构建工具 / 脚手架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| create-react-app | 无需配置文件快速创建 React 应用（最好用的脚手架） | 73333 | 17179 |
| react-boilerplate | 一个简单灵活的 React 脚手架（专注于性能和最佳实践的） | 24033 | 4927 |
模板引擎
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| htm | 使用标准标记模板的 JSX 替代方案 | 5272 | 104 |
测试框架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| reactjs_koans | Learn basics of React.js making the tests pass | 3109 | 460 |
| essential-react | A minimal skeleton for building testable React apps using ES6 | 2053 | 145 |
实用工具
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-router | React 的申明式路由 | 38282 | 7812 |
| gatsby | 一个 React.js 静态站点生成工具，能够利用最新的技术将你的文本和数据转换成博客和站点 | 39889 | 6621 |
| react-redux | React 官方的 Redux 绑定 | 18360 | 2719 |
| react-sketchapp | 为 Sketch 渲染 React 组件，为设计系统量身定做 | 13925 | 774 |
| Ink | An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping | 1918 | 278 |
| react-slingshot | React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in | 9493 | 1655 |
| react-360 | 使用 React 创建的 360 全景和 VR | 7637 | 1043 |
| react-pxq | 一个 react + redux 的完整项目 和 个人总结 | 6477 | 2004 |
| guppy | ? 一个友好的 React.js 应用管理和任务运行器 | 2971 | 154 |
| vuera | 无缝集成 React 和 Vue，实现在 React 中使用 Vue 组件，Vue 中使用 React 组件 | 2584 | 119 |
| js-lingui | 在 Javascript 和 React 中实现具有类型检查的直观的 i18n 国际化 | 2458 | 160 |
| echarts-for-react | 一个简单的 echarts(v3.0) 的 react 封装 | 2317 | 324 |
| reactopt | 一个 React 性能优化 CLI 工具，能够发现潜在的没必要的渲染工作 | 1970 | 54 |
| react-with-gesture | ?React 鼠标 / 触摸手势工具库 | 1543 | |
| ran | React + GraphQL + Next.js 工具箱 | 1898 | 166 |
| react-copy-write | ✍️ 简单的 React 状态管理器 | 1771 | 55 |
| react-tv | 使用 React 开发电视（TV）应用（渲染低内存的应用以及打包 WebOS | 1784 | 137 |
开发助手
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| structor | User interface builder for React | 5543 | 441 |
游戏引擎
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| boardgame.io | 基于 React 的游戏框架，该框架允许游戏开发者将游戏的规则转化为一系列的简单函数 | 7600 | 477 |
| react-game-kit | 利用 React 和 React Native 开发游戏的组件库 | 4221 | 289 |
界面 / 组件
框架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| material-ui | 集成 Google Material 设计的 React 组件 | 52093 | 12918 |
| react-bootstrap | 基于 React 的 Bootstrap 3 组件 | 16612 | 2697 |
| blueprint | 一个 React UI 工具组件库 | 15112 | 1410 |
| react-toolbox | 一系列集成 Material 设计风格和 CSS 模块的 React 组件 | 8521 | 1050 |
| react-desktop | 模拟 macOS 和 Windows 10 桌面效果的 React UI 组件 | 8466 | 430 |
| rebass | 一个原生的 React UI 组件库 | 5880 | 377 |
| grommet | 针对企业应用的先进的 UX 框架 | 5560 | 674 |
| nerv | 京东凹凸实验室推出的一款基于 Virtual DOM 的类 React 组件框架 | 4960 | 281 |
| elemental | 一个针对 React.js 的灵活的、漂亮的 UI 框架 | 4274 | 238 |
| mui | 轻量级的 CSS 框架 | 4272 | 456 |
| react-responsive | Media queries in react for responsive design | 4177 | 225 |
| gestalt | 一组支持 Pinterest 设计语言的 React UI 组件库 | 3296 | 211 |
| rsuite | 一套 React 的 UI 组件库 | 3416 | 220 |
| react-kawaii | 一组可爱的 React UI 组件 | 215 | 285 |
| uiw icons | 从 uiw 组件库抽离出来的图标字体 | 官网 | Github |
| react-native-vector-icons | React Native的自定义图标支持 | 官网 | Github |
| UXCore | 专注于企业系统开发的 React PC 套件库 | [官网](http://uxco.re http://uxcore.coding.me) | Github |
| awesome-react-components | React 组件/库集合 | - | Github |
| Elemental UI | 一个针对 React.js 的灵活的、漂亮的 UI 框架 | 官网 | Github |
| React Suite | 一套 React 组件库，为后台产品而生 | 官网 | Github |
| evergreen | 一个开源的React UI框架 | 官网 | Github |
| React95 | Windows 95 UI设计启发的React组件库 | 官网 | Github |
实用工具
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-sortable-hoc | 一组能将任意列表转换为可拖动排序的 React 高阶组件 | 7392 | 665 |
动画
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-motion | 一个 React 弹性动画库，使用 0-10 的弹性参数进行动画处理。 | 17501 | 912 |
| react-move | React Move - 一个 React 动画组件 | 6039 | 185 |
| velocity-react | React components for Velocity.js | 2940 | 157 |
| react-tween-state | React animation. | 174 | 184 |
通知提示
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-notifications-component | 高可配的易于使用的 React 提示组件 | 660 | 28 |
表单
富文本编辑器
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| draft-js | Facebook 推出的在 React 中创建富文本编辑器的解决方案，更多地是一个原型，所以支持深度定制 | 16929 | 1860 |
| react-md-editor | 基于 Markdown 的 React.js 编辑器组件 | 467 | 73 |
日期时间
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-date-range | A React component for choosing dates and date ranges. | 1309 | 344 |
| recal | 一个轻量级的 React / Preact 日期选择器 | 192 | 9 |
颜色（选择器）
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-color | 功能强大的颜色选择器组件，有 Sketch, Photoshop, Chrome 等风格可供选择 | 7635 | 636 |
表单美化
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-select | 为 React JS 打造的包含多选、自动完成、ajax 支持的下拉框 | 18384 | 3354 |
实用工具
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-datasheet | 类似 Excel 数据表格的 react 组件 | 3714 | 309 |
| react-spreadsheet-grid | 类似于 Excel 的 React 表格组件，可自定义单元格编辑器 | 902 | 49 |
图像图表
图形库
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| vx | react + d3 = vx(react 结合 D3 实现的图标库） | 可视化组件 | 6517 |
| react-konva | React + Canvas = 使用 React 进行复杂 canvas 绘图的 JavaScript 库 | 2948 | 140 |
轮播
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-swipeable-views | 一个 React 轮播组件 | 3222 | 338 |
灯箱
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-medium-image-zoom | Medium.com 样式的图片放大 React 组件 | 682 | 65 |
图表可视化
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| recharts | 基于 React 和 D3 构建的号称重新定义图表的插件 | 12685 | 974 |
| react-chartkick | React 应用中一行代码创建 JavaScript 图表 | 1107 | 51 |
| rc-bmap | 基于 React 的百度地图组件 | 847 | 41 |
图片处理
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-imgpro | React 图片处理组件 | 2129 | 106 |
| react-shimmer | 图片加载的过程中模拟微光效果 ? 的 React 图片组件 | 487 | 15 |
| react-image-appear | 有过渡效果显示图片的 ReactJS 组件 | 216 | 12 |
多媒体
视频
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| video-react | 一个 HTML5 web 视频播放器的 React 组件 | 1515 | 242 |
移动端
框架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| react-native | 一个基于 React 的创建原生 APP 的框架 | 82507 | 18464 |
| react-native-elements | React Native UI 组件库 | 3 | 2 |
| react-native-ui-kitten | 可定制和可重用的 react-native 组件包 | 5250 | 626 |
Node.js
框架
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| next.js | 为 React 应用打造的服务端渲染框架 | 42316 | 5617 |
| mern-starter | 一个创建通用的 React 应用的强大模板 | 5233 | 1242 |
内容管理系统
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| firekylin | 奇舞团开发的一款基于 ThinkJS & React & ES2015+ 的 Node.js 博客系统 | 1694 | 389 |
文档生成
| React_Package_Name | 描述 | Star | Fork |
|---|---|---|---|
| redocx | 用 React 创建 Word 文档 | 1240 | 73 |
qita
| React_Package_Name | 描述 | Website | Github |
|---|---|---|---|
| relax | 基于 React 和 Node.js 的下一代 CMS 系统 | - | Github |
| cannerCMS | React JSX中的通用CMS框架 | 官网 | Github |
| enzyme | 一个用于 React 的 JavaScript 测试工具 | 官网 | Github |
| ink | React 打造的的交互命令行工具 | - | Github |
| Electrode | 一个用于构建通用 React / Node.js 应用程序的平台 | - | Github |
| Nuclide | Facebook专门为React开发的IDE | 官网 | Github |
| deco-ide | React Native集成开发环境IDE | 官网 | Github |
| CodeSandbox | 在线写React,自动编译,有代码提示 | 官网 | - |
| cs-playground-react | js常用排序算法和数据结构的交互式概述 | 官网 | Github |
| realworld | 由React，Angular，Node，Django等提供支持的示例 | 官网 | Github |
| React LoadCon | React组件来操作favicon，用于加载或进度 | 官网 | Github |
| react-native-masonry | 用于渲染一个图像masonry~ish布局react-native组件 | - | Github |
| react-timeline-gantt | 用于显示和管理日历甘特图的react组件 | - | Github |
| react-dates | React 日期组件 | 官网 | Github |
| proppy.js | UI组件的功能道具组合（React.js和Vue.js） | 官网 | Github |
| ant-motion | 快速在 React 框架中使用动画 | 官网 | Github |
| nivo.js | React数据可视化库 | 官网 | Github |
| React Simple Maps | 一个基于React创建SVG地图的组件库 | 官网 | Github |
| react-animations | react中的动画集合 | 官网 | Github |
| react-spring | 使用于reactjs的动画工具库 | 官网 | Github |
| react-native-chart-kit | React Native图表工具包 | 官网 | Github |
| Chartify | 简单、轻量级的React.js插件来构建动画可拖动的图表 | 官网 | Github |
| after.js | 使用React Router 4的React SSR应用框架 | 官网 | Github |
| styled-components | 针对React写的一套css in js框架 | [官网](https://styled-components.com react css-in-js styled-components css) | Github |
| anujs | 一个高级兼容React16的迷你React 框架 | 官网 | Github |
| es4x | 一款支持EcmaScript >=5应用的小型运行 | 官网 | Github |
| preactjs | React 的 3kb 轻量化方案 | 官网 | Github |
| UmiJs(五米) | 支付宝推出极快的类 Next.js 的 React 应用框架 | 官网 | Github |
| Nautil | 一款基于 react 的响应式开发框架 | 官网 | Github |
| react-server | 构建React应用的一个Express 中间件 | 官网 | Github |
手机
| React_Package_Name | 描述 | Website | Github |
|---|---|---|---|
| React Belle | 一个React组件库 | 官网 | Github |
| react-native-ui-lib | React Native的UI组件库和工具集 | 官网 | Github |
| react-native-sideswipe | 简单跨平台的React Native可滑动的组件 | - | Github |
| react-virtualized | 高效渲染大量列表和表格数据的 React 组件 | 官网 | Github |
| NativeBase | 提供给react-native使用的一系列跨平台通用的UI组件 | 官网 | Github |
| react-use-gesture | 组件绑定鼠标/触摸手势的小助手 | - | Github |
| vasern | 一个用于React Native的快速，轻量级和开源数据存储 | 官网 | Github |
| Hermes | 一款小巧轻便的 JavaScript 引擎，针对在 Android 上运行 React Native 进行了优化 | 官网 | Github |
| Ant Design Mobile | 一个基于 Preact / React / React Native 的 UI 组件库 | 官网 | Github |
| alita | React Native代码转换成微信小程序代码的转换引擎工具 | 官网 | Github |
| bindingx | 基于 weex / React Native 的富交互解决方案 | 官网 | Github |
