最佳 React 开源项目

2025-05-27

最佳 React 开源项目

每位优秀的开发者都应该致力于开源项目，这已不是什么秘密。这对于个人职业发展以及技术生态系统都大有裨益。

最佳 React 开源项目

但是，如何选择适合你的业余时间投入的项目呢？本文将简要解答如何选择一个优秀的开源项目。此外，我们还会帮助你区分好坏，并围绕 React 生态系统精选一些优秀的项目。

什么是好的开源项目

要知道您应该在哪个开源项目上投入时间，您需要了解是什么让它变得优秀。

即使向项目添加一个小功能，也需要你了解整个项目/库/插件的运作方式。因此，第一点：项目应该有完善的文档。所有依赖项都应该有清晰的描述。流行且高质量的开源解决方案通常都有完善的文档。这可以很好地体现社区的高质量和支持。

第二件值得关注的事情是问题处理工作是否井然有序。总体审视一下这些问题。项目中有多少个关键问题？它们解决的速度有多快？

另一件事是如何记录提交规则的。想象一下这种情况。你发现了一个 bug，你付出了巨大的努力去修复它，它给你带来了一些麻烦，但由于规则不够明确，你的补丁没有被包含在提交中。

了解社区。它是开源项目最大的资源之一。活跃的社区总能推动项目向前发展。优秀的开源软件总是拥有一个由开发者或活跃用户组成的社区，他们编写代码、检测并为其他用户提供支持。选择拥有良好社区支持的软件，无论何时遇到 bug 修复困难，都能为您提供帮助。良好的社区支持总能帮助您解决未来可能出现的问题。

在查看 Github 上的项目时，请寻找拥有大量星星、关注者、分支、贡献者等的人/包。这些可见的社区支持线索表明社区关心该人、项目或行动，并且许多其他人将从中受益。

请记住，提交、问题和拉取请求 (PR) 的数量可以表明对项目的投资和承诺。

Google 趋势也可以很好地衡量对项目或技术的兴趣程度。

如何选择要投入的项目

选择一个能给你带来新知识的项目。不要选择太容易更改或调试的产品。选择一个你认为能够长期生存的项目，以保住你投入的资金。你还需要选择一个对其他人有用的项目。

如果您从一开始就参与项目，您将受益更多，从而了解项目的整个生命周期：构思、原型设计、设计、测试、实施。

找到一个你愿意投入知识和时间的项目的好方法是问问别人。你很有可能得到很好的推荐。找到一个能帮助你成长、并且能够礼貌沟通的社区。

你也可以为你经常使用或将来会用到的东西做贡献。你可以关注一下公司正在使用的项目。

另一种方法是创建一个自己的新项目。如果你的目标只是学习如何使用 GitHub，或者只是想提高一些基本的编程效率，那么一个自主发起的项目就​​能满足你的需求。你可以做一些简单小事来锻炼你的开源经验，或者投入大量时间去创建一个更大的项目，并尝试与其他贡献者合作。不要害怕发起你自己的开源项目。

最佳 React 开源项目

在过去的几年里，React 已发展成为一个广受欢迎的 JavaScript 库和开发者生态系统。让我们来看看基于 React 的最佳开源项目。我们根据工具的用途将这份精选分为几个部分。

注意：其中一些（但不是全部）是 MIT 许可的。

React 工具包

第一部分是真正有助于开发 React 应用程序的库。

未声明

GitHub：https://github.com/jamiebuilds/unstated
星级：6649
网站：-

Unstated 的设计目的是建立在 React 组件和上下文已经设定的模式之上。

Unstated 建立在三个主要思想/组成部分之上：

  • 容器是一个非常简单的类，其外观与 React 类似。它是一个仅包含状态相关部分的组件。
  • 订阅是将状态从容器传递到组件的方式。它的行为与状态的行为相同，即当状态改变时，组件会重新渲染，但你也可以调用容器上的方法。
  • Provider 是我们内部存储所有实例的地方。未声明的 Provider 的工作原理与 Redux 或 Apollo Provider 类似：它以流畅的方式使用上下文将 API 提取为组件易于使用的内容。

这个库是状态管理的进化版。它降低了复杂性，并且保留了 React 的边界。如果你理解了 context 的工作原理，你就能理解这个库的工作原理。

反应引导

GitHub：https://github.com/react-bootstrap/react-bootstrap/
星级：15711
网站：https://react-bootstrap.github.io/

React Bootstrap 取代了 Bootstrap JavaScript。每个组件都是从头构建的，完全是 React 组件，没有 jQuery 等不必要的依赖项。

React Bootstrap 完全依赖 Bootstrap 样式表，因此可以轻松兼容您喜爱的数千个 Bootstrap 主题。每个组件的实现都充分考虑了可访问性。最终，我们打造了一组默认可访问的组件，超越了普通 Bootstrap 的可访问性。

React-Bootstrap 是使用 React 对 Bootstrap 组件的完整重新实现。它不依赖 bootstrap.js 或 jQuery。

用户界面

反应选择

GitHub：https://github.com/JedWatson/react-select
星级：16989
网站：https://react-select.com/home

最佳 React 开源项目

React Select 是 React 的一个选择控件，最初是为了在 KeystoneJS 中使用而构建的。

React Select 由 Thinkmill 和 Atlassian 资助。它代表了一种开发强大的 React.js 组件的新方法，这些组件开箱即用，且高度可定制。

功能包括：

  • 具有可定制功能的灵活数据处理方法
  • 可扩展的情感化造型 API
  • 组件注入 API，用于完全控制 UI 行为
  • 可控状态 props 和模块化架构
  • 长期呼声高涨的功能，例如选项组、门户支持、动画。该框架非常易于定制。

常绿

GitHub : https://github.com/segmentio/evergreen
星数: 8061
网址: https://evergreen.segment.com/

Evergreen 是 Segment.com 在 React 之上构建的 UI 框架。

Evergreen 包含一组精良的 React 组件，开箱即用。这些组件基于 React UI Primitive 构建，可实现无限组合性。Evergreen 拥有一套适用于企业级 Web 应用的 UI 设计语言。

长青的核心信念：

  • Evergreen 秉持着这样的信念：你永远无法预测所有未来的需求，只能未雨绸缪。Evergreen 不追求构建目前适用的固定配置，而是倡导构建能够预测新变化的设计需求的系统。
  • Evergreen 秉持着这样的理念：一切事物都应该开箱即用，拥有智能默认设置，并在需要时提供完全的控制权。例如，Evergreen 的大部分组件都基于 Box 原语实现，从而允许进行大量自定义。
  • Evergreen 秉持着这样的信念：使用 Evergreen 并为 Evergreen 做出贡献应该是一种愉快的体验。我们优先考虑文档和所有工具，以确保开发者获得良好的体验。我们提倡在写作和互动中保持尊重和包容。

反应弹簧

GitHub：https://github.com/react-spring/react-spring
星级：13488
网站：https://www.react-spring.io/

最佳 React 开源项目

React-spring 是一个基于 Spring-physics 的动画库。该库代表了一种现代的动画方法。它继承了 Animation 强大的插值功能和性能，以及 React-motion 的易用性。

React-spring 是跨平台的，它支持 Web、React-Native、React-Native-Web 以及几乎任何其他平台。其大小最终取决于你的构建链，并可以通过 tree-shaking 进行缩减。该库以 es-module 的形式提供，并针对常用浏览器进行了编译。

材质 UI

GitHub : https://github.com/mui-org/material-ui
星数: 48270
网址: https://material-ui.com/

最佳 React 开源项目

Material-UI 是一个开源项目，其 React 组件实现了 Google 的 Material Design 设计理念。Material-UI 在 GitHub 上拥有超过 35,000 个 star，是目前最顶尖的 React 用户界面库之一。

Material-UI 的真正强大之处在于它的灵活性。例如，它提供了三种不同的组件样式设置方式。

使用基于钩子的 api (makeStyles/useStyles)
使用 styled-components api (styled(Component)({…stylesObject})
使用 HoC (withStyles(styles)(Component)

Ant-design

GitHub : https://github.com/ant-design/ant-design
星标: 48076
网址: https://ant.design/

最佳 React 开源项目

Ant Design 是一个 React UI 库，包含数十个易于使用的组件，可用于构建优雅的用户界面。它由阿里巴巴集团创建。它是第二受欢迎的 React UI 库。由于它是一款亚洲产品，其内置的设计思维可能不适合欧洲或西方产品。

故事书

GitHub：https://github.com/storybookjs/storybook
星级：39035
网站：https://storybook.js.org/

最佳 React 开源项目

Storybook 是一个开源工具，用于为 React、Vue 和 Angular 独立开发 UI 组件。

Storybook 运行于应用外部。这使得您可以独立开发 UI 组件，从而提高组件的复用性、可测试性和开发速度。您可以快速构建，无需担心特定于应用的依赖关系。

该产品附带大量用于组件设计、文档编写、测试、交互等方面的附加组件。Storybook 易于使用的 API 使其能够轻松进行各种配置和扩展。

该库得到了 Atlassian、Airbnb 和 Lyft 等公司的认可。

应用程序

频谱聊天

GitHub : https://github.com/withspectrum/spectrum
星级: 7011
网站: https://spectrum.chat/

最佳 React 开源项目

Spectrum 是一个类似 Slack 的开源聊天工具，用于管理社区。它基于 React 开发，现已成为 Github 的一部分。

Spectrum 上的对话是实时聊天，就像您常用的即时通讯应用一样。每个对话都会有一个专属链接，方便用户轻松发现、分享或保存以备后用。

Draft.js

GitHub：https://github.com/facebook/draft-js
星标：15937
网站：https://draftjs.org/

最佳 React 开源项目

Draft.js 是一个在 React 中构建富文本编辑器的框架，它由通用模型提供支持并克服跨浏览器的差异。

Draft.js 可以轻松构建任何类型的富文本输入，无论您只是希望支持一些内联文本样式还是构建用于撰写长篇文章的复杂文本编辑器。

在 Draft.js 中，一切都是可定制的——它由构建块组成，以便您可以完全控制用户界面。

该应用无缝集成到 React 应用程序中，通过熟悉的声明式 API 涵盖渲染、选择和输入行为的细节。Draft.js 模型基于 immutable-js 构建，提供具有功能状态更新的 API，并积极利用数据持久性来实现可扩展的内存使用。

开发人员工具

西瓜数据库

GitHub : https://github.com/Nozbe/WatermelonDB
星级: 5580
网站: https://watermelondb.now.sh/

最佳 React 开源项目

WatermelonDB 是一个适用于强大的 React 和 React Native 应用程序的高性能反应式数据库。

它针对在 React 中构建复杂应用程序进行了优化，其首要目标是实际性能。

在 WatermelonDB 中，除非收到请求，否则不会加载任何内容。由于所有查询都直接在可靠的 SQLite 数据库上通过单独的原生线程执行，因此大多数查询都能立即得到解决。

但与直接使用 SQLite 不同，Watermelon 是完全可观察的。因此，每当您更改一条记录时，所有依赖于该记录的 UI 都会自动重新渲染。例如，在待办事项应用中完成一项任务将重新渲染任务组件、列表（用于重新排序）以及所有相关的任务计数器。

React 开发者工具

GitHub：https://github.com/facebook/react-devtools
星级：10148
网站：-

最佳 React 开源项目

React 开发者工具可让您检查 React 组件层次结构，包括组件道具和状态。

它既可以作为浏览器扩展（适用于 Chrome 和 Firefox），也可以作为独立应用程序（可与其他环境（包括 Safari、IE 和 React Native）配合使用）。

入门套件

Gatsby.js

GitHub：https://github.com/gatsbyjs/gatsby
星级：35902
网站：https://www.gatsbyjs.org/

最佳 React 开源项目

Gatsby 是一款免费的开源现代 React 网站生成器。基于 Gatsby 构建的网站是功能齐全的 React 应用，您可以创建各种动态 Web 应用，从博客到电商网站以及用户仪表板。Gatsby 网站使用 React 和 GraphQL 构建。

该产品可以从任何来源提取数据，无论是 Markdown 文件、Contentful 或 WordPress 等无头 CMS，还是 REST 或 GraphQL API。Gatsby 网站不需要服务器，因此您可以将整个网站托管在 CDN 上，成本仅为服务器渲染网站的一小部分。

创建 React 应用

GitHub：https://github.com/facebook/create-react-app
星级：69088
网站：https://facebook.github.io/create-react-app/

Create React App 是一个入门套件，可帮助您启动 React 网站，而无需学习和配置许多构建工具。

开发过程中，您无需重新构建整个应用程序。即时重新加载功能会为您完成所有工作。Create React App 在底层使用了 Webpack、Babel、ESLint 和其他项目。如果您需要高级配置，可以从 Create React App 中“弹出”并直接编辑其配置文件。

这是 React 生态系统中最受欢迎的 React 项目和入门工具。它由 Facebook 开源项目支持。

其他项目

React 路由器

GitHub：https://github.com/ReactTraining/react-router
星级：36710
网站：https://reacttraining.com/react-router/

最佳 React 开源项目

React Router 是一组导航组件，它们可以声明式地与你的应用组合。无论你是想为 Web 应用添加可收藏的 URL，还是想在 React Native 中使用可组合的导航方式，React Router 都能在任何 React 渲染环境中正常工作。

反应 MapGL

GitHub：https://github.com/uber/react-map-gl
星级：4563
网站：https://uber.github.io/react-map-gl/#/

最佳 React 开源项目

这个库为 MapboxGL 提供了 React 组件。借助这个小型库，您可以在 Mapbox 地图中使用标记、弹出窗口和地图，以及定位用户并执行其他操作。

由于 Mapbox 的大部分 JS API 功能依赖于 HTML5 画布和 WebGL 的使用，而 React 并非为此而构建的，因此该库提供了方便的包装器，用于初始化和（在某种程度上）跟踪 Mapbox WebGL 地图的状态。

福米克

GitHub : https://github.com/jaredpalmer/formik
星级: 16218
网站: https://jaredpalmer.com/formik/

最佳 React 开源项目

Formik 负责处理重复和烦人的事情 - 跟踪值/错误/访问的字段，负责验证和处理提交 - 所以您不必这样做。

通过留在核心 React 框架内并且远离魔法，Formik 使得调试、测试和推理表单变得轻而易举。

Formik 不使用 Redux 或 MobX 等外部状态管理库。

回顾与结论

起步确实很难，但一旦你完成了第一次贡献，以后的贡献就会容易得多。事情并非总是一帆风顺。React 开源生态系统为你、你的公司乃至全世界真正有价值的项目提供了一个很好的机会。如果你有补充，我们将非常乐意倾听你的想法。

奖励：贡献前的清单

当你找到一个想贡献的项目时，请快速浏览一下，确保该项目适合接受贡献。否则，你的辛勤工作可能永远得不到回应。

以下是一个方便的清单，用于评估一个项目是否适合新贡献者：

  • 符合开源的定义；
  • 它有许可证吗？通常，它是存储库根目录中名为 LICENSE 的文件；
  • 项目积极接受贡献；
  • 查看主分支上的提交活动。最新一次提交是什么时候？
  • 该项目有多少贡献者？
  • 人们多久提交一次？（在 GitHub 上，您可以通过单击顶部栏中的“提交”来找到此信息。）

接下来看看项目的问题：

  • 有多少未解决的问题？
  • 当问题出现时，维护人员是否会快速做出响应？
  • 这些问题是否有积极的讨论？
  • 这些问题是最近发生的吗？
  • 问题关闭了吗？（在 GitHub 上，单击问题页面上的“已关闭”选项卡即可查看已关闭的问题。）

现在对项目的拉取请求执行相同的操作：

  • 有多少个开放的拉取请求？
  • 当拉取请求被打开时，维护人员是否会快速做出响应？
  • 关于拉取请求是否有积极的讨论？
  • 这些拉取请求是最近的吗？
  • 最近有拉取请求被合并了吗？（在 GitHub 上，点击拉取请求页面上的“已关闭”选项卡即可查看已关闭的 PR。）

项目欢迎：

  • 一个友好而热情的项目表明他们将乐于接受新的贡献者；
  • 维护人员对问题中的问题是否做出了有益的回应？
  • 人们在问题、讨论论坛和聊天（例如 IRC 或 Slack）中是否友好？
  • 拉取请求会被审核吗？
  • 维护者会感谢人们的贡献吗？

关于 Flatlogic

在 Flatlogic，我们开发管理仪表板模板和React Native 模板。我们是白俄罗斯和立陶宛排名前 20 的 Web 开发公司之一。在过去的 6 年里，我们成功为小型初创公司和大型企业完成了30 多个大型项目。作为一个团队，我们始终渴望为客户提供帮助。

您可能还喜欢这些文章：

顶级日期选择器 JavaScript 插件和库
顶级 React Native UI 组件套件
顶级 6 Vue 管理模板

最初发布于flatlogic.com — React、Angular、Vue、Bootstrap 和 React Native 模板和主题。

文本来源：最佳 React 开源项目

文章来源：https://dev.to/flatlogic/best-react-open-source-projects-p1e
Devto 翻译
PREV
Chromebook 自动点击器
NEXT
20+ React 开发工具助你提高编程效率