后端开发教程 - Java、Spring Boot 实战 - msg200.com
5 个很棒的库，可用于你的下一个 ReactJs 项目
我们都知道 Reactjs 是一个 UI 库，可以使用它来快速构建用户界面。但是 Reactjs 生态系统非常丰富，您只需使用一些外部库就可以构建动态交互式 Web 应用程序。
在这篇文章中，我们将讨论您可以在下一个项目中使用的 5 个 Reactjs 库。我们将讨论它的用例以及它如何帮助您顺利构建下一个项目。
以下是我们将要讨论的库的列表
- 反应流
- 反应 Markdown
- 代码镜像
- React Draft 所见即所得
- 反应 tippy
让我们开始吧。
反应流
介绍
React flow 是一个构建基于节点的应用程序的库，它由webkid.io构建。
用例
假设您想要构建一个应用程序，在其中呈现节点图/流程，这些节点图/流程可以是从静态到动态的任何内容。
在这里我们可以使用反应流来呈现节点图/流程，最终用户可以自定义它，可以添加新节点，可以更新现有节点并删除现有节点。
为什么要使用 React Flow 而不是其他库
- 可定制
- 实用程序丰富
- 类型支持
- 快速渲染
- 以及更多
实例
这是OpenMetadata的一个实例，它是一个发现、协作和获取正确数据的单一场所，使用 React 流来呈现实体谱系。
反应 Markdown
介绍
React markdown 是一个 markdown 解析器 react 组件，它可以获取字符串 markdown 并将其渲染到 react 元素。
用例
这个库可能有多种用例，假设您正在构建一个博客应用程序，并且内容将以 markdown 格式呈现，因此您可以使用 react markdown 来解析内容。
在我们的开发过程中，我们都至少使用过一次 GitHub 或类似的应用程序，并且知道大多数内容都是 markdown 格式。因此，我们还可以使用 react markdown 构建一个工具来创建 GitHub readme 配置文件。
为什么使用 React Markdown 而不是其他库
- 便于使用
- 丰富的API支持
- 客户组件支持
- 可通过插件系统进行扩展
实例
在这里您可以看到我已经使用 react markdown 构建了一个markdown 预览器。您可以编写 markdown 并并排查看输出，也可以将其下载为 markdown 文件。
代码镜像
介绍
Code Mirror 是一个文本编辑器，支持不同的语言和附加组件，以实现进步并扩展现有的功能。
用例
假设您正在构建一个 LMS（学习管理系统），并且您想要向最终用户提供一个编辑器来编辑代码片段，这些代码片段可以是任何语言，如 python、javascript 等，也可以是 JSON、Avro、SQL 等格式。
在这里您可以使用代码镜像来构建一个编辑器，让最终用户可以使用代码片段。
为什么使用代码镜像而不是其他库
- 支持超过 100 种语言
- 代码折叠支持
- 支持内联和块小部件
- 可配置绑定
- 由 Firefox、Chrome 和 Safari 等浏览器使用。
实例
在这里您可以看到Carbon工具的代码镜像的实时使用案例，用于创建和共享源代码的精美图像。
React Draft 所见即所得
介绍
React Draft WYSIWYG 是一个建立在 reactjs 和draftjs之上的富文本编辑器，可以使用 react 组件在您的应用程序中提供富文本支持。
用例
如今，大多数社区/出版物（如Hashnode、、dev.to和medium）showscase都devdojo提供对富文本内容的支持，并且他们已经构建了自己的富文本编辑器。但您不必重新发明轮子，您可以在应用程序中直接使用 React Draft WYSIWYG。
为什么使用 React Draft WYSIWYG 而不是其他库
- 您可以配置工具栏选项
- 支持提及和主题标签
- 支持表情符号
- 支持国际化。
实例
在这里您可以看到实例。React Draft WYSIWYG
反应 tippy
介绍
React Tippy 是 React.js 的轻量级工具提示组件库。它提供了一个工具提示元素或 HOC（高阶组件），并使用 React DOM 来渲染工具提示。
用例
React tippy 的用例很简单，如果您需要使用工具提示显示一些内容，那么您应该使用 React Tippy 库。
为什么使用 React Tippy 而不是其他库
- 与 React.js 配合良好
- Tippy.js 的增强
- 支持多种触发器
- 可定制
- 支持不同的主题
- 支持不同尺寸
实例
本期内容就到这里。感谢您的阅读。
与我联系
