17 个库助你成为 React 奇才

React 正在变得越来越好，尤其是最新发布的 React 19。

今天，我们将深入研究 17 个 React 库，它们将帮助您成为更高效的开发人员，并帮助您实现 React Wizadry！别忘了收藏本文并给这些很棒的开源项目点赞。

此列表可能会让您感到惊讶，所以让我们开始成为 React 向导吧。

1. CopilotKit – 构建 AI Copilots 容易 10 倍。

您会同意在 React 中添加 AI 功能很困难，而这正是 Copilot 可以作为构建自定义 AI Copilots 的框架来帮助您的地方。

您可以使用 Copilotkit 提供的简单组件构建应用内 AI 聊天机器人和应用内 AI 代理，这比从头开始构建至少容易 10 倍。

如果已经有一个非常简单和快速的解决方案，你就不应该重新发明轮子！

他们还提供内置（完全可定制的）Copilot 原生 UX 组件，<CopilotKit />如<CopilotPopup />、、、<CopilotSidebar />。<CopilotTextarea />

从以下 npm 命令开始。

npm i @copilotkit/react-core @copilotkit/react-ui

这就是您集成聊天机器人的方式。

必须CopilotKit包装与 CopilotKit 交互的所有组件。建议您也从这里开始CopilotSidebar（稍后您可以切换到不同的 UI 提供程序）。

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css"; 

export default function RootLayout({children}) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

您可以阅读文档并查看演示视频。

您可以轻松集成 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 提供程序。您可以按照本指南将聊天机器人集成到您的应用程序中。

基本思想是快速构建 AI 聊天机器人，且无需太多努力，尤其是基于 LLM 的应用程序。

您可以观看完整的演练！

CopilotKit 最近在 GitHub 上发布了 300 多个版本，获得了 7000 多颗星，这是一个重要的里程碑。

明星 CopilotKit ⭐️

2. Mantine Hooks – 用于状态和 UI 管理的反应钩子。

你有多少次在从头开始编写钩子时遇到困难？
好吧，从现在起，多亏了 mantine hooks，我再也不会遇到这种问题了！

编写更多代码效率不高，因为您最终需要维护它，所以最好使用这些生产级钩子来使您的工作更轻松，而且每个钩子都有大量的选项。

我们不应该比较项目，但这将是每个人都可以使用的最有用的项目，而不是从头开始编写代码。

相信我，获得 60 多个钩子是一件大事，因为他们有一个简单的方法让你看到每个钩子的演示，并且有易于理解的文档。

从以下 npm 命令开始。

npm install @mantine/hooks

这就是您可以将其用作useScrollIntoView螳螂钩的一部分的方法。

import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Box } from '@mantine/core';

function Demo() {
  const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({
    offset: 60,
  });

  return (
    <Group justify="center">
      <Button
        onClick={() =>
          scrollIntoView({
            alignment: 'center',
          })
        }
      >
        Scroll to target
      </Button>
      <Box
        style={{
          width: '100%',
          height: '50vh',
          backgroundColor: 'var(--mantine-color-blue-light)',
        }}
      />
      <Text ref={targetRef}>Hello there</Text>
    </Group>
  );
}

它们几乎拥有一切，从本地存储到分页，再到滚动视图、交叉点，甚至还有一些非常酷的实用工具，如滴管和文本选择。这真是太有用了！

您可以阅读文档。

他们在 GitHub 上有超过 24.5k+ 颗星，但这不仅仅是因为 hooks，因为他们是 React 的组件库。

为了更好地理解，随着该软件包的v7发布，每周的下载量超过 34 万次，这证明了其可信度。

星形螳螂钩 ⭐️

3. React Email——使用 React 构建和发送电子邮件。

电子邮件可能是人们交流的最重要媒介。然而，我们需要停止像 2010 年那样开发电子邮件，并重新思考如何在 2022 年及以后开发电子邮件。它应该根据我们今天构建 Web 应用的方式进行现代化改造。

您正在开发软件，并且希望使用代码发送电子邮件吗？您一定听说过 Resend（2023 年最热门的产品之一）。他们提供了一种使用 React 构建和发送电子邮件的简单解决方案。

一组高质量、无样式的组件，用于使用 React 和 TypeScript 创建精美的电子邮件。它通过暗黑模式支持减轻了编写响应式电子邮件的痛苦。它还可以为您
解决Gmail、Outlook 和其他电子邮件客户端之间的不一致问题。

从以下 npm 命令开始，它会自动为您设置一切。

这将创建一个名为“”的新文件夹，react-email-starter其中包含一些您可以使用的电子邮件模板。

npx create-email@latest

他们提供了一组标准组件，帮助您创建出色的电子邮件，而无需处理从头开始创建布局的麻烦。查看可用组件的完整列表。

您可以使用此命令安装组件。如果您愿意，也可以安装单个组件。

npm install @react-email/components -E

我们来看几个例子。

按钮组件。

import { Button } from "@react-email/components";

const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};

图像组件。

import { Img } from "@react-email/components";

const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};

电子邮件客户端有这个概念，preview text可以在您打开电子邮件之前深入了解电子邮件的内容。您可以使用他们在文档中提供的预览组件来实现这一点。

您可以阅读文档并查看使用 React Email 构建的开源模板（示例）列表。

他们还记录了如何从另一个电子邮件框架切换到反应电子邮件。

为了将 React Email 与任何电子邮件服务提供商一起使用，您需要将使用 React 制作的组件转换为 HTML 字符串。这里提供了大量集成，以及一个清晰的示例，说明如何通过安装@babel/preset-typescript和添加.babelrc配置文件将 React Email 集成到您的 NodeJS 应用程序中。

它在 GitHub 上有 12k 个星，GitHub 上有 7000 多名开发人员在使用。我非常喜欢他们让它变得如此简单。

星号反应电子邮件 ⭐️

4. React Player – 用于播放各种 URL 的 React 组件。

如果您希望在您的网站中添加视频，尤其是嵌入来自其他网站（如 Vimeo）的视频，那么这个组件可以让您的工作变得更加轻松。

一个简单的 React 组件，用于播放各种 URL，包括文件路径、YouTube、Facebook、Twitch、SoundCloud、Streamable、Vimeo、Wistia、Mixcloud、DailyMotion 和 Kaltura。您可以查看支持的媒体列表。

ReactPlayer 的维护工作正在由 Mux（一个流行的组织）接管，这使得他们能够得到良好的管理。

从以下 npm 命令开始。

npm install react-player

您可以这样使用它。

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />

// If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size.

// like this: import ReactPlayer from 'react-player/youtube'

您还可以使用react-player/lazy惰性加载来适应您传入的 URL。这会将几个 reactPlayer 块添加到您的输出中，但会减小主包的大小。

import React from 'react'
import ReactPlayer from 'react-player/lazy'

// Lazy load the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

您可以阅读文档并查看演示。它们提供了许多选项，包括添加字幕和以简单的方式使其响应。您可以使用带有大量选项的演示来测试自定义 URL！

它们在 GitHub 上有 9k+ 颗星，被 149k+ 开发人员使用，并且npm 包的每周下载量高达680k+。

明星 React 播放器 ⭐️

5. Replexica——为 React 提供 AI 驱动的 i18n 工具包。

本地化问题确实存在，因此值得研究借助一点人工智能来帮助解决。

Replexica 是 React 的 i18n 工具包，用于快速交付多语言应用程序。它不需要将文本提取到 JSON 文件中，并使用 AI 驱动的 API 进行内容处理。

Replexica 是一个平台，而不是一个图书馆。它就像拥有一支翻译和本地化工程师团队为您工作，但无需支付管理费用。您只需要一个 API 密钥，一切就绪！

一些令人兴奋的功能让这一切都值得。

✅ Replexica 会自动将您的应用翻译成多种语言。

✅ Replexica 确保翻译准确且符合上下文，适合用户界面，并且致力于比人类翻译得更好。

✅ 当您添加新功能时，Replexica 会保持您的应用本地化（更像是持续本地化）。

它有以下两个部分：

1. Replexica Compiler - React 的开源编译器插件。

2. Replexica API - 一种云端 i18n API，使用 LLM 执行翻译。（基于使用情况，有免费套餐）

一些支持的 i18n 格式包括：

1. 不含 JSON 的 Replexica 编译器格式。

2. Markdown 内容的 .md 文件。

3. 传统的基于 JSON 和 YAML 的格式。

当他们获得 500 颗星时，他们还在 DEV 上发布了官方公告。我是第一批读者之一（反应不到 3 人）。
他们涵盖了很多内容，所以你应该读读Max 的《我们获得了 500 颗星，下一步该怎么做》。

为了让您大致了解 Replexica，以下是对基本 Next.js 应用程序进行多语言支持所需的唯一更改。

从以下 npm 命令开始。

// install
pnpm add replexica @replexica/react @replexica/compiler

// login to Replexica API.
pnpm replexica auth --login

您可以这样使用它。

// next.config.mjs

// Import Replexica Compiler
import replexica from '@replexica/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
  locale: {
    source: 'en',
    targets: ['es'],
  },
};

// Wrap Next.js config with Replexica Compiler
export default replexica.next(
  replexicaConfig,
  nextConfig,
);

您可以阅读快速入门指南以及有关内部使用内容的清晰记录。

Replexica Compiler 支持 Next.js App Router，Replexica API 支持英语🇺🇸和西班牙语🇪🇸。他们计划接下来发布 Next.js Pages Router + 法语🇫🇷 语言支持！

他们在 GitHub 上有 950 多个星，并且基于 TypeScript 构建。这个项目可以为你节省大量时间！

星 Replexica ⭐️

6. Victory——用于构建交互式数据可视化的 React 组件。

如今，许多开发人员都在处理大量数据（主要是使用 API）。因此，一种能够轻松可视化这些数据的方法是一个很酷的概念，可以将应用程序提升到一个新的水平。

Victory 是一个可组合 React 组件的生态系统，用于构建交互式数据可视化。

从以下 npm 命令开始。

npm i --save victory

您可以这样使用它。

<VictoryChart
  domainPadding={{ x: 20 }}
>
  <VictoryHistogram
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleHistogramDateData}
    bins={[
      new Date(2020, 1, 1),
      new Date(2020, 4, 1),
      new Date(2020, 8, 1),
      new Date(2020, 11, 1)
    ]}
  />
</VictoryChart>

这是它的呈现方式。它们还提供动画和主题选项，通常很有用。

您可以阅读文档并按照教程开始使用。它们提供了大约 15 种不同的图表选项，并且每种选项下都有疯狂的自定义功能，这几乎令人难以置信！

它也适用于React Native（文档），所以这是一个加分点。我还建议查看他们的常见问题解答，其中描述了代码和解释的常见问题的解决方案，例如样式、注释（标签）、处理轴。

它即将发布v37，总体来说规模非常大（我没想到），哈哈！

该项目在 GitHub 上拥有 10.5k+ 颗星，并被 GitHub 上 24k+ 开发人员使用。

星胜利⭐️

7. Tremor——用于构建图表和仪表板的 React 组件。

Tremor 提供了 20 多个开源 React 组件，用于在 Tailwind CSS 之上构建图表和仪表板，使数据可视化再次变得简单。

从以下 npm 命令开始。

npm i @tremor/react

这就是您可以使用 Tremor 快速构建事物的方法。

import { Card, ProgressBar } from '@tremor/react';

export default function Example() {
  return (
    <Card className="mx-auto max-w-md">
      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        Sales
      </h4>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        $71,465
      </p>
      <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        <span>32% of annual target</span>
        <span>$225,000</span>
      </p>
      <ProgressBar value={32} className="mt-2" />
    </Card>
  );
}

这就是将要生成的输出。

您可以阅读文档并查看组件列表。其中，它们在底层使用了 remix 图标。

从我见过的各种组件来看，这是一个很好的起点。相信我！

他们有一个震颤块的概念，让您可以访问 250 多个精心制作的块和每个模板，以更快地构建仪表板、应用程序和网站。

Tremor 还提供了简洁的 UI 工具包。太酷了！

Tremor 在 GitHub 上拥有 15.5k+ 颗星，被 GitHub 上 8k+ 开发人员使用，并且有超过 330 个版本，这意味着它正在不断改进。

星淚震颤⭐️

8. React Slick – React 轮播组件。

React Slick 是一个使用 React 构建的轮播组件。它是 Slick 轮播的 React 端口。

大约两年前，我使用 JS 库构建了一个轮播，这是一项艰巨的任务，而且它不是生产级代码。我宁愿使用它，而不是简单的库，甚至从头开始！

从以下 npm 命令开始。

npm install react-slick --save

这就是您可以使用自定义分页的方式。

import React, { Component } from "react";
import Slider from "react-slick";
import { baseUrl } from "./config";

function CustomPaging() {
  const settings = {
    customPaging: function(i) {
      return (
        <a>
          <img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
        </a>
      );
    },
    dots: true,
    dotsClass: "slick-dots slick-thumb",
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <div className="slider-container">
      <Slider {...settings}>
        <div>
          <img src={baseUrl + "/abstract01.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract02.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract03.jpg"} />
        </div>
        <div>
          <img src={baseUrl + "/abstract04.jpg"} />
        </div>
      </Slider>
    </div>
  );
}

export default CustomPaging;

您可以阅读有关可用的道具选项和方法。

您可以阅读文档和所有示例集，其中包含完整的代码和输出。这会让工作变得容易得多，对吧？

它们在 GitHub 上拥有 11.5k+ 颗星，并被 GitHub 上 400k+ 开发人员使用。

明星反应光滑 ⭐️

9. React Content Loader – 基于 SVG 的组件，可轻松创建骨架加载。

我访问网站时，发现没什么可展示的。我知道它正在加载，因为我是一名开发人员。但不是每个人都知道，所以他们甚至不知道发生了什么。

这就是为什么骨架加载器很重要，尤其是对于加载状态。

该项目为您提供了一个由 SVG 支持的组件，可轻松创建占位符加载（如 Facebook 的卡片加载）。

加载状态下通常会使用 Skeleton 来向用户表明内容仍在加载中。每个开发人员都应该使用这个方便的项目来改善应用程序的整体用户体验。

有一些事情使这个变得更好！

✅ 轻量级 - 网页版小于 2kB 且无依赖项

✅ 随意更改颜色、速度、尺寸甚至 RTL。

✅ 它支持 React Native，具有通用 API 和强大的功能。

从以下 npm 命令开始。

npm i react-content-loader --save

您可以这样使用它。

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default MyLoader

其输出如下所示。

您甚至可以拖动单个骨架或使用为不同社交媒体（如 Facebook 和 Instagram）制作的预定义骨架。

您可以阅读文档并查看演示。

该项目在 GitHub 上拥有 13.4k+ 个 Star，并被 GitHub 上 47k+ 名开发人员使用。

星号 React 内容加载器 ⭐️

10. React Hot Toast – 超火热的 React 通知。

几乎每个 React 开发人员都听说过这个，它真的太出名了！

我仍将其包括在内的原因是因为它提供了出色的默认体验和简单的自定义选项。

✅ 它利用 Promise API 实现自动加载器，确保平稳过渡。

✅ 此外，它重量轻，不到 5kb，并且仍然可访问，同时为具有无头钩子的开发人员提供选项useToaster()。

首先将 Toaster 添加到您的应用中。它将负责呈现所有发出的通知。现在您可以toast()从任何地方触发！

从以下 npm 命令开始。

npm install react-hot-toast

它使用起来就是这么简单。

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

他们有很多选项可以自定义它，但useToaster()钩子为你提供了一个无头系统，可以为你管理通知状态。这使得构建通知系统变得更加容易。

您可以阅读文档、样式指南并查看演示。

该项目在 GitHub 上有 9.3k+ 颗星，GitHub 上有 290k+ 开发人员在使用。它很简单，而且效果非常好！

星反应热吐司⭐️

11. aHooks – 高质量、可靠的 React Hooks 库。

这是另一个方便的钩子库，与我们之前讨论的类似。我之所以将其包括在内，是因为它是开发人员中另一个流行的选择。

ahooks 是一套易于使用且可靠的 React Hooks 库。它用 TypeScript 编写，具有可预测的静态类型。据我所知，它有大约 50 多个钩子！

✅ 包含大量从业务场景提炼的高级 Hook。✅
支持 SSR，支持函数特殊处理，避免闭包问题。

从以下 npm 命令开始。

$ npm install --save ahooks

例如，您可以使用useLocalStorageState它来存储数据。您甚至不需要了解本地存储就可以使用此钩子。阅读有关此钩子提供的选项的更多信息。

import React from 'react';
import { useLocalStorageState } from 'ahooks';

export default function () {
  const [message, setMessage] = useLocalStorageState<string | undefined>(
    'use-local-storage-state-demo1',
    {
      defaultValue: 'Hello~',
    },
  );

  return (
    <>
      <input
        value={message || ''}
        placeholder="Please enter some words..."
        onChange={(e) => setMessage(e.target.value)}
      />
      <button style={{ margin: '0 8px' }} type="button" onClick={() => setMessage('Hello~')}>
        Reset
      </button>
      <button type="button" onClick={() => setMessage(undefined)}>
        Clear
      </button>
    </>
  );
}

查看钩子的完整列表。在每个钩子中，您都可以获得可用于自定义它的代码沙箱链接、示例、代码、道具和参数。

它们有很多选项，包括 Web 套接字、DOM、事件、效果，甚至还有一些高级选项，例如 useIsomorphicLayoutEffect 和 useMemoizedFn。总的来说，它非常方便，特别是因为您最终维护的代码更少。

您可以阅读快速入门指南并在codesandbox上实时检查。

如果您正在寻找替代方案，请尝试以下方法：

• ✅使用ui.dev 团队的Hooks 。

• ✅漂亮的 React Hooks。

我知道，我发现了很多这样的方法，但是现在尝试只使用一种，以避免混淆，并掌握它！

它在 GitHub 上有 13.5k 个星，并被 GitHub 上 20k+ 名开发人员使用。

星号 aHooks ⭐️

12. cmdk – 快速、无样式的命令菜单 React 组件。

这是一个命令菜单 React 组件，也可以用作可访问的组合框。您可以渲染项目，它会自动过滤和排序它们。⌘K（项目名称）支持完全可组合的 API，因此您可以将项目包装在其他组件中，甚至可以将其包装为静态 JSX。

从以下 npm 命令开始。

pnpm install cmdk

这就是您通常的使用方法。

import { Command } from 'cmdk'

const CommandMenu = () => {
  return (
    <Command label="Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </Command>
  )
}

您可以阅读有关零件和样式的文档。

您可以了解如何根据您想要的样式进行更改。

射线投射

线性

韦尔塞尔

框架者

您应该看到所有示例和常见问题解答的列表，其中回答了很多重要的问题。

它在 GitHub 上有近 9k 个星，并且是一个非常新的项目（提交次数少于 130 次）。

星号 cmdk ⭐️

13. React JSONSchema Form——用于从 JSON Schema 构建 Web 表单。

react-jsonschema-form自动从 JSON Schema 生成 React 表单，使其成为仅使用 JSON 模式为任何数据生成表单的理想选择。它提供自定义选项（如 uiSchema），以定制表单的外观，超越默认主题。

从以下 npm 命令开始。

npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save

您可以这样使用它。

import { RJSFSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';

const schema: RJSFSchema = {
  title: 'Todo',
  type: 'object',
  required: ['title'],
  properties: {
    title: { type: 'string', title: 'Title', default: 'A new task' },
    done: { type: 'boolean', title: 'Done?', default: false },
  },
};

const log = (type) => console.log.bind(console, type);

render(
  <Form
    schema={schema}
    validator={validator}
    onChange={log('changed')}
    onSubmit={log('submitted')}
    onError={log('errors')}
  />,
  document.getElementById('app')
);

它们提供高级定制选项，包括自定义小部件。

您可以阅读文档并检查现场游乐场。

它在 GitHub 上有 13000 多颗星，有 5000 多位开发人员在使用。他们有v5190 多个版本，因此他们不断改进。

Star React JSONSchema 表单⭐️

14. React DND——用于 React 的拖放功能。

我还没有完全实现拖放功能，但我经常发现自己对选择哪个选项感到困惑。

我现在只介绍 React DND。我遇到的另一个选项是interactjs.io，根据我读过的文档，它似乎非常有用。由于他们提供了详细的示例，因此它非常简单。

从以下 npm 命令开始。

npm install react-dnd react-dnd-html5-backend

除非您正在编写自定义的，否则您可能希望使用 React DnD 附带的 HTML5 后端。

这是安装方法react-dnd-html5-backend。阅读文档。

这是起点。

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

这就是您可以非常轻松地实现卡片拖放功能的方法。

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

请注意，HTML5 后端不支持触摸事件。因此它无法在平板电脑和移动设备上使用。您可以将 用作react-dnd-touch-backend触摸设备。阅读文档。

import { TouchBackend } from 'react-dnd-touch-backend'
import { DndProvider } from 'react-dnd'

class YourApp {
  <DndProvider backend={TouchBackend} options={opts}>
    {/* Your application */}
  </DndProvider>
}

这个代码沙箱规定了我们如何正确使用 React DND。

您可以查看React DND 的示例。

他们甚至有一个干净的功能，您可以使用 Redux 检查内部发生的情况。

您可以通过向提供程序添加 debugModeprop（其值为 true）来启用Redux DevTools 。

<DndProvider debugMode={true} backend={HTML5Backend}>

它提供了多种组件选项，我需要亲自测试一下。总体而言，它看起来相当不错，特别是对于刚入门的人来说。

React DND 的许可范围为MIT，在 GitHub 上拥有超过 20k+ 颗星，并且在 GitHub 上被 232k+ 名开发人员使用，这使其成为完美的选择。

星反应 DND ⭐️

15. Google Map React – 用于反应的 Google 地图库。

这提供了google-map-react一个基于一小组Google Maps API编写的组件。

✅ 它允许您在 Google 地图上呈现任何 React 组件。

✅ 它是完全同构的，可以在服务器上渲染。

✅ 即使未加载 Google Maps API，它也可以在浏览器中呈现地图组件。

✅ 它使用内部的、可调整的悬停算法，基本上地图上的每个对象都可以悬停。

它允许您创建类似本例的界面。您可以滚动表格、缩放/移动地图、悬停/单击标记，甚至单击表格行。

我看到很多开发人员只是添加它而没有进行太多的定制，这导致了糟糕的用户体验。

从以下 npm 命令开始。

npm install --save google-map-react

您可以这样使用它。

import React from "react";
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627
    },
    zoom: 11
  };

  return (
    // Important! Always set the container height explicitly
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}

确保容器元素具有宽度和高度。地图将尝试填充父容器，但如果容器没有大小，地图将折叠为 0 宽度/高度（一般添加 Google 地图的规则）。

您可以阅读详细的文档和10 多个示例。

它在 GitHub 上有 6k+ 颗星，并被 GitHub 上 71k+ 的开发人员使用。

星号 Google 地图 React ⭐️

16. React Diagrams——一个用 React 编写的超级简单、实用的图表库。

内容

使用以下 npm 命令开始。然后，您将找到一个 dist 文件夹，其中包含所有已缩小且可用于生产的代码。

yarn add @projectstorm/react-diagrams

让我们看看如何使用它。

import createEngine, { 
    DefaultLinkModel, 
    DefaultNodeModel,
    DiagramModel 
} from '@projectstorm/react-diagrams';

import {
    CanvasWidget
} from '@projectstorm/react-canvas-core';

我们需要调用createEngine它将为我们引导一个包含所有默认设置的 DiagramEngine。

// create an instance of the engine with all the defaults
const engine = createEngine();

// creating two nodes
// node 1
const node1 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);
let port1 = node1.addOutPort('Out');

// node 2
const node2 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
});
node2.setPosition(100, 100);
let port2 = node2.addOutPort('Out');

//we link the two ports of both of the nodes
// also add a label to the link
const link = port1.link<DefaultLinkModel>(port2);
link.addLabel('Hello World!');

现在我们已经设置了一个简单的图表。
剩下要做的就是创建一个 DiagramModel 来包含所有内容，向其中添加所有元素，然后将其添加到引擎。

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

// we just need to render in react
<CanvasWidget engine={engine} />

您可以阅读文档并查看现场演示。

这个库的灵感是 Joint JS（一个很棒的库）+丰富的 HTML 节点的需求+LabView+Blender Composite 子系统。

如果您感兴趣的话，可以阅读有关如何执行端到端测试的文章，但大多数开源项目都经过了充分测试，因此您不必太担心。您还可以阅读有关如何制作自定义节点和自定义端口的文章。

它在 GitHub 上有 8k+ 颗星，是使用 TypeScript 构建的。

星型反应图 ⭐️

17. Refine – 面向企业的开源 Retool。

Refine 是一个元 React 框架，可以快速开发各种各样的 Web 应用程序。

从内部工具到管理面板、B2B 应用程序和仪表板，它是构建任何类型的 CRUD 应用程序（例如 DevOps 仪表板、电子商务平台或 CRM 解决方案）的综合解决方案。

您可以在不到一分钟的时间内使用单个 CLI 命令进行设置。
它具有 15 多种后端服务的连接器，包括 Hasura、Appwrite 等。

您可以查看可用的集成列表。

但最好的部分是 Refine 是headless by design，从而提供无限的样式和定制选项。

由于其架构，您可以使用流行的 CSS 框架（如 Tailwind CSS）或从头开始创建自己的样式。

这是最好的部分，因为我们不想因为与特定库的兼容性而受到样式的限制，因为每个人都有自己的风格并使用不同的 UI。

从以下 npm 命令开始。

npm create refine-app@latest

使用 Refine 添加登录就是这么简单。

import { useLogin } from "@refinedev/core";
const { login } = useLogin();

使用 Refine 概览代码库的结构。

const App = () => (
  <Refine
    dataProvider={dataProvider}
    resources={[
      {
        name: "blog_posts",
        list: "/blog-posts",
        show: "/blog-posts/show/:id",
        create: "/blog-posts/create",
        edit: "/blog-posts/edit/:id",
      },
    ]}
  >
    /* ... */
  </Refine>
);

您可以阅读文档。

您可以看到一些使用 Refine 构建的示例应用程序：

• 功能齐全的管理面板

• 完善不同用例场景。

他们甚至提供模板，这也是为什么这么多用户喜欢 Refine 的原因。
您可以查看模板。

我试图了解更多关于他们的事情，然后我偶然发现了他们的博客，里面有一些不错的文章。我最喜欢的是 React admin 与 Refine 的比较！

它们在 GitHub 上拥有大约 25k+ 颗星，并被 GitHub 上 1.5k+ 开发人员使用。

星光精炼⭐️

我认为提高生产力是一种选择，并且您（作为开发人员）应该为您的用例找到更好的解决方案。

请告诉我您最喜欢上述哪一个图书馆。

祝您度过愉快的一天！下次再见。