总结

我收集了你应该了解的 React 库，以构建许多不同类型的项目并成为 React 专家🧙‍♂️。

这些中的每一个都是独一无二的，有自己的用例。
别忘了给它们加星标 🌟

我们开始吧！

1. CopilotKit - 应用内 AI 聊天机器人、文本区域和 AI 代理

在 React 中集成 AI 功能非常困难，而这正是 Copilot 发挥作用的地方。这是一种简单而快速的解决方案，可将可用于生产的 Copilot 集成到任何产品中！

您可以使用两个 React 组件将关键 AI 功能集成到 React 应用中。它们还提供内置（完全可定制）Copilot 原生 UX 组件，例如<CopilotKit />、、、。<CopilotPopup /><CopilotSidebar /><CopilotTextarea />

从以下 npm 命令开始。

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

Copilot Portal 是 CopilotKit 提供的组件之一，CopilotKit 是一个应用内 AI 聊天机器人，可以查看当前应用状态并在应用内采取行动。它通过插件与应用前端和后端以及第三方服务进行通信。

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

必须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>
  );
}

您可以使用此快速入门指南设置 Copilot Backend 端点。

此后，您可以让 Copilot 采取行动。您可以阅读如何提供外部上下文。您可以使用useMakeCopilotReadable和useMakeCopilotDocumentReadablereact hooks 来实现这一点。

"use client";

import { useMakeCopilotActionable } from '@copilotkit/react-core';

// Let the copilot take action on behalf of the user.
useMakeCopilotActionable(
  {
    name: "setEmployeesAsSelected", // no spaces allowed in the function name
    description: "\"Set the given employees as 'selected'\","
    argumentAnnotations: [
      {
        name: "employeeIds",
        type: "array", items: { type: "string" }
        description: "\"The IDs of employees to set as selected\","
        required: true
      }
    ],
    implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
  },
  []
);

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

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

其基本思想是在几分钟内构建可用于基于 LLM 的应用程序的 AI 聊天机器人。

用例非常广泛，作为开发人员，我们绝对应该在下一个项目中尝试使用 CopilotKit。

明星 CopilotKit ⭐️

2. xyflow——使用 React 构建基于节点的 UI。

XYFlow 是一个功能强大的开源库，用于使用 React 或 Svelte 构建基于节点的 UI。它是一个 monorepo，提供React Flow和Svelte Flow。让我们进一步了解 React flow 可以做什么。

您可以观看此视频，在 60 秒内了解 React Flow。

部分功能在专业模式下可用，但免费套餐中的功能足以实现高度交互的流程。React 流程使用 TypeScript 编写，并使用 Cypress 进行测试。

从以下 npm 命令开始。

npm install reactflow

以下是如何创建两个节点Hello& World，它们通过一条边连接。节点具有预定义的初始位置以防止重叠，我们还应用了样式以确保有足够的空间来渲染图形。

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

它看起来是这样的。您还可以添加标签、更改类型并使其具有交互性。

您可以在 React Flow 的 API 参考中看到完整的选项列表以及组件、钩子和实用程序。

最好的部分是您还可以添加自定义节点。在自定义节点中，您可以呈现所需的一切。您可以定义多个源和目标句柄并呈现表单输入或图表。您可以查看此codesandbox作为示例。

您可以阅读文档并查看Create React App、Next.js 和 Remix 的示例 React Flow 应用程序。

React Flow 带有几个额外的插件组件，可以帮助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 组件制作更高级的应用程序。

例如，你可能注意到许多网站的背景中都有圆点，这增强了美感。要实现这种模式，你只需使用 React Flow 中的 Background 组件即可。

import { Background } from 'reactflow';

<Background color="#ccc" variant={'dots'} />  // this will be under React Flow component. Just an example.

如果你正在寻找一篇速成文章，我建议你查看一下Webkid 编写的React Flow - 一个用于渲染交互式图形的库。React Flow 由 Webkid 开发和维护。

它在 GitHub 上有 19k+ 颗星，并且展示了v11.10.4它们不断改进的成果，npm 包的每周下载量超过 400k。这是您可以轻松使用的最佳项目之一。

星星 xyflow ⭐️

3. Zod + React Hook Form——验证的致命组合。

第一个问题是：为什么我要在同一个选项中包含 Zod 和 React Hook 表单？好吧，请阅读本文以找出答案。

Zod 旨在通过尽量减少重复的类型声明来方便开发人员。使用 Zod，您只需声明一次验证器，Zod 就会自动推断静态 TypeScript 类型。将较简单的类型组合成复杂的数据结构很容易。

从以下 npm 命令开始。

npm install zod

这就是在创建字符串模式时自定义一些常见错误消息的方法。

const name = z.string({
  required_error: "Name is required",
  invalid_type_error: "Name must be a string",
});

// It does provide lots of options
// validations
z.string().min(5, { message: "Must be 5 or more characters long" });
z.string().max(5, { message: "Must be 5 or fewer characters long" });
z.string().length(5, { message: "Must be exactly 5 characters long" });
z.string().email({ message: "Invalid email address" });
z.string().url({ message: "Invalid url" });
z.string().emoji({ message: "Contains non-emoji characters" });
z.string().uuid({ message: "Invalid UUID" });
z.string().includes("tuna", { message: "Must include tuna" });
z.string().startsWith("https://", { message: "Must provide secure URL" });
z.string().endsWith(".com", { message: "Only .com domains allowed" });
z.string().datetime({ message: "Invalid datetime string! Must be UTC." });
z.string().ip({ message: "Invalid IP address" });

请阅读文档以了解有关 Zod 的更多信息。

它适用于 Node.js 和所有现代浏览器。

现在，进入第二部分。

有很多可用的表单集成。

虽然 Zod 可以验证对象，但如果没有定制的逻辑，它不会影响您的客户端和后端。

React-hook-form 是一个出色的客户端验证项目。例如，它可以显示输入错误。

从以下 npm 命令开始。

npm install react-hook-form

这就是您可以使用的方式React Hook Form。

import { useForm, SubmitHandler } from "react-hook-form"


type Inputs = {
  example: string
  exampleRequired: string
}


export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)


  console.log(watch("example")) // watch input value by passing the name of it


  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />


      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}


      <input type="submit" />
    </form>
  )
}

您甚至可以隔离重新渲染，从而提高整体性能。

您可以阅读文档。
两者结合是一个很好的组合。试试吧！

我是通过 Shadcn 发现它的，他们将其用作表单组件的默认组件。我自己已经在几个项目中使用过它，效果非常好。它提供了很大的灵活性，这真的很有帮助。

星之佐德⭐️ 星型 React Hook 表单 ⭐️

4. React DND – 用于 React 的拖放功能。

我还没有完全实现拖放功能，我经常对选择哪个选项感到困惑。我遇到的另一个选项是interactjs.io，根据我读过的文档，它似乎非常有用。由于他们提供了详细的示例，所以它相当容易。

但我现在只介绍 React DND。

从以下 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>
}

这个 codesandbox 规定了我们如何正确使用 React DND。

您可以查看React DND 的示例。

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

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

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

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

React DND 已获得许可，MIT并且在 GitHub 上拥有超过 20,000 个 Star，因此非常可信。

星反应 DND ⭐️

5. Cypress——快速测试浏览器中运行的内容。

最近几年已经证明了测试的重要性，而 Jest 和 Cypress 等选项使测试变得非常简单。

但我们只介绍 Cypress，因为它本身就很方便。
只需一张图片就能证明 Cypress 值得一试。

从以下 npm 命令开始。

npm install cypress -D

如果您的项目中没有使用 Node 或包管理器，或者想要快速试用 Cypress，您可以随时直接从他们的 CDN 下载 Cypress。

安装并打开后，您必须创建一个带有的 spec 文件.cy.js。

现在，您可以编写并测试您的应用程序（示例代码）。

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Cypress 提供了多种选择，例如cy.visit()或。由于我还没有广泛使用过 Cypress，因此您需要在其文档cy.contains()中进一步探索。

如果觉得这很可怕，那就去看看这个 freeCodeCamp 教程，它为初学者讲解了 Cypress。Freecodecamp视频真的是金矿 :D

Cypress 在 GitHub 上拥有超过 45,000 颗星，随着其当前 v13 版本的发布，它在不断改进。

星柏⭐️

6. Refine——面向企业的开源 Retool。

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

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

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

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

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

由于架构的原因，您可以使用流行的 CSS 框架（如 TailwindCSS）或从头开始创建样式。
这是最好的部分，因为我们不想因为与特定库的兼容性而受到样式的限制，因为每个人都有自己的风格并使用不同的 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 的原因。
您可以查看模板。

他们在 GitHub 上有大约 22k+ 颗星。

星精炼⭐️

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 图标。

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

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

Tremor 在 GitHub 上拥有 14k+ 颗星，并且有超过 280 个版本，这意味着它正在不断改进。

星淚震颤⭐️

8. Watermelon DB——用于 React 和 React Native 的反应式和异步数据库。

我不确定为什么数据库有这么多选项；甚至很难全部数出来。但如果我们使用 React，Watermelon DB 是一个不错的选择。v0.28即使在 4k+ 次提交之后，它们仍然处于发布状态，这是一件大事。

Rocket.chat 使用 Watermelon DB，这为他们带来了巨大的可信度。

从以下 npm 命令开始。

npm install @nozbe/watermelondb

您需要做的第一件事是创建模型和随后的迁移（阅读文档）。

import { appSchema, tableSchema } from '@nozbe/watermelondb'

export default appSchema({
  version: 1,
  tables: [
    // We'll add to tableSchemas here
  ]
})

根据文档，使用 WatermelonDB 时，您需要处理模型和集合。然而，Watermelon 之下有一个底层数据库（SQLite 或 LokiJS），它使用不同的语言：表和列。它们统称为数据库模式。

您可以阅读有关CRUD 操作的文档和更多内容。

星西瓜数据库⭐️

9.Evergreen UI ——Segment 的 React UI 框架。

没有 UI 框架的列表几乎是不可能的。有很多流行的选项，例如 Material、Ant Design、Next UI 等等。

但我们介绍的 Evergreen 本身就非常出色。

从以下 npm 命令开始。

$ npm install evergreen-ui

任何用户界面的基础以及详细的选项均显示在Evergreen Segment 网站上。

它提供了很多组件，其中一些非常好例如Tag Input或File uploader。

您可以看到Evergreen UI 提供的所有组件。

星级常青 UI ⭐️

10. React Spring – 流畅的动画，提升 UI 和交互。

如果您喜欢 react-motion 但感觉过渡不流畅，那是因为它专门使用 React 渲染。

如果您喜欢 Popmotion，但感觉自己的功能受到限制，那是因为它完全跳过了 React 渲染。

react-spring提供两种选择，尝试一下！

从以下 npm 命令开始。

npm i @react-spring/web

这就是如何导入高阶组件来完成动画的过程。

import { animated } from '@react-spring/web'

// use it.
export default function MyComponent() {
  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
      }}
    />
  )
}

我决定尝试 React Spring，是因为下面的 codesandbox。React Spring 可以做很多事情，真是令人惊讶。

您可以阅读文档。

他们还提供了很多您可以学习的例子。

它提供了大量的选项，例如useScroll，它允许您创建滚动链接动画。

例如，这个 codesandbox 告诉了的用法useScroll。

React Spring 在 GitHub 上有大约 27k+ 个 Star。

明星反应弹簧⭐️

11. React Tweet——在你的 React 应用中嵌入推文。

React Tweet允许您在使用 Next.js、Create React App、Vite 等时将推文嵌入 React 应用程序中。
此库不需要使用 Twitter API。推文可以静态呈现，无需包含 iframe 和其他客户端 JavaScript。

它是 Vercel 的一个开源项目。

从以下 npm 命令开始。

npm i react-tweet

要显示推文，我们需要从 Twitter 的 API 请求数据。通过此 API 限制速率很有挑战性，但如果您仅依赖我们为 SWR ( react-tweet.vercel.app/api/tweet/:id) 提供的端点，这是可能的，因为服务器的 IP 地址向 Twitter 的 API 发出了很多请求。这也适用于 RSC，其中 API 端点不是必需的，但服务器仍从同一 IP 地址发送请求。

为了避免 API 限制，您可以使用 Redis 或 Vercel KV 等数据库缓存推文。例如，您可以使用 Vercel KV。

import { Suspense } from 'react'
import { TweetSkeleton, EmbeddedTweet, TweetNotFound } from 'react-tweet'
import { fetchTweet, Tweet } from 'react-tweet/api'
import { kv } from '@vercel/kv'

async function getTweet(
  id: string,
  fetchOptions?: RequestInit
): Promise<Tweet | undefined> {
  try {
    const { data, tombstone, notFound } = await fetchTweet(id, fetchOptions)

    if (data) {
      await kv.set(`tweet:${id}`, data)
      return data
    } else if (tombstone || notFound) {
      // remove the tweet from the cache if it has been made private by the author (tombstone)
      // or if it no longer exists.
      await kv.del(`tweet:${id}`)
    }
  } catch (error) {
    console.error('fetching the tweet failed with:', error)
  }

  const cachedTweet = await kv.get<Tweet>(`tweet:${id}`)
  return cachedTweet ?? undefined
}

const TweetPage = async ({ id }: { id: string }) => {
  try {
    const tweet = await getTweet(id)
    return tweet ? <EmbeddedTweet tweet={tweet} /> : <TweetNotFound />
  } catch (error) {
    console.error(error)
    return <TweetNotFound error={error} />
  }
}

const Page = ({ params }: { params: { tweet: string } }) => (
  <Suspense fallback={<TweetSkeleton />}>
    <TweetPage id={params.tweet} />
  </Suspense>
)

export default Page

您可以直接使用它，非常简单。

<div className="dark">
  <Tweet id="1629307668568633344" />
</div>

如果您不喜欢使用 Twitter 主题，您还可以使用多个选项创建自己的自定义主题。

例如，您可以构建自己的推文组件，但没有回复按钮，如下所示：

import type { Tweet } from 'react-tweet/api'
import {
  type TwitterComponents,
  TweetContainer,
  TweetHeader,
  TweetInReplyTo,
  TweetBody,
  TweetMedia,
  TweetInfo,
  TweetActions,
  QuotedTweet,
  enrichTweet,
} from 'react-tweet'

type Props = {
  tweet: Tweet
  components?: TwitterComponents
}

export const MyTweet = ({ tweet: t, components }: Props) => {
  const tweet = enrichTweet(t)
  return (
    <TweetContainer>
      <TweetHeader tweet={tweet} components={components} />
      {tweet.in_reply_to_status_id_str && <TweetInReplyTo tweet={tweet} />}
      <TweetBody tweet={tweet} />
      {tweet.mediaDetails?.length ? (
        <TweetMedia tweet={tweet} components={components} />
      ) : null}
      {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />}
      <TweetInfo tweet={tweet} />
      <TweetActions tweet={tweet} />
      {/* We're not including the `TweetReplies` component that adds the reply button */}
    </TweetContainer>
  )
}

您可以阅读文档。

您可以查看React Tweet 的演示，了解它在页面上的呈现方式。

他们发布的v3.2版本表明他们在不断改进，每周的下载量超过46k+。

星号反应推文⭐️

12. React 360——使用 React 创建令人惊叹的 360 和 VR 内容。

尽管 Facebook 已将其存档，但许多开发人员仍然认为它很有用，值得继续使用。

React 360 是一个利用大量 React Native 功能来创建在 Web 浏览器中运行的虚拟现实应用程序的库。

它使用 Three.js 进行渲染，并以 npm 包的形式提供。通过将 WebGL 和 WebVR 等现代 API 与 React 的声明能力相结合，React 360 有助于简化创建跨平台 VR 体验的过程。

从以下 npm 命令开始。

npm install -g react-360-cli

涉及的内容很多，但您可以使用 VrButton 为您的 React VR 应用添加重要的交互功能。

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

state = {
  count: 0
};

_incrementCount = () => {
  this.setState({
    count: this.state.count + 1
  })
}

<View style={styles.panel}>
        <VrButton
          onClick={this._incrementCount}
          style={styles.greetingBox}>
          <Text style={styles.greeting}>
            {`You have visited Simmes ${this.state.count} times`}
          </Text>
        </VrButton>
</View>

除了许多令人惊奇的东西之外，您还可以添加声音。请参阅使用 React 360 的 React Resources上的示例。

您还可以阅读 Log Rocket 的博客，了解如何使用 React 360 构建 VR 应用程序。

这个 codesandbox 代表了我们可以用 React 360 做什么的一个常见例子。

星反应 360 ⭐️

13. React Advanced Cropper – 创建适合您网站的裁剪器。

React Advanced Cropper 是一个高级库，可让您创建适合任何网站设计的裁剪器。这意味着您不仅可以更改裁剪器的外观，还可以自定义其行为。

它们仍处于测试版本，这意味着 API 可能会在未来的版本中发生变化。

简单的用例是设计软件和裁剪图像表面以获得进一步的了解。

他们有很多选择，所以值得。

从以下 npm 命令开始。

npm install --save react-advanced-cropper

您可以这样使用它。

import React, { useState } from 'react';
import { CropperRef, Cropper } from 'react-advanced-cropper';
import 'react-advanced-cropper/dist/style.css'

export const GettingStartedExample = () => {
    const [image, setImage] = useState(
        'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80',
    );

    const onChange = (cropper: CropperRef) => {
        console.log(cropper.getCoordinates(), cropper.getCanvas());
    };

    return (
        <Cropper
            src={image}
            onChange={onChange}
            className={'cropper'}
        />
    )
};

您可以阅读文档，它们提供了20 多个选项来定制它。

它们主要提供三种类型的裁剪选项：固定、经典和混合，以及示例和代码。

你可以使用 React Advanced Cropper 制作一些令人兴奋的东西来向世界展示:)

Star React 高级裁剪器 ⭐️

14. Mobx——简单、可扩展的状态管理。

MobX 是一个基于信号的成熟库，它通过函数式响应式编程简化和扩展状态管理。它提供了灵活性，使您能够独立于任何 UI 框架管理应用程序状态。

这种方法可以产生解耦的、可移植的、易于测试的代码。

以下是使用 MobX 在任何应用程序中处理事件的方式。

图片来自文档

从以下 npm 命令开始。

npm install mobx-react --save
// CDN is also available

它看起来应该是这样的。

import { observer } from "mobx-react"

// ---- ES6 syntax ----
const TodoView = observer(
    class TodoView extends React.Component {
        render() {
            return <div>{this.props.todo.title}</div>
        }
    }
)

// ---- ESNext syntax with decorator syntax enabled ----
@observer
class TodoView extends React.Component {
    render() {
        return <div>{this.props.todo.title}</div>
    }
}

// ---- or just use function components: ----
const TodoView = observer(({ todo }) => <div>{todo.title}</div>)

您可以在观察者中使用 props、全局变量或使用 React Context 来使用外部状态。

您可以阅读有关 React Integration和npm 文档的文档。

您还可以阅读MobX 和 React 的 10 分钟交互式介绍。

MobX 在 GitHub 上拥有 27k+ 颗星，并被 GitHub 上 140K+ 的开发人员使用。

明星 Mobx ⭐️

15. React Virtualized——渲染大型列表和表格数据。

从以下 npm 命令开始。

npm install react-virtualized --save

以下是如何在网格中使用 ColumnSizer 组件。浏览演示（文档）以详细了解可用的选项。

import React from 'react';
import ReactDOM from 'react-dom';
import {ColumnSizer, Grid} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// numColumns, numRows, someCalculatedHeight, and someCalculatedWidth determined here...

// Render your list
ReactDOM.render(
  <ColumnSizer
    columnMaxWidth={100}
    columnMinWidth={50}
    columnCount={numColumns}
    width={someCalculatedWidth}>
    {({adjustedWidth, getColumnWidth, registerChild}) => (
      <Grid
        ref={registerChild}
        columnWidth={getColumnWidth}
        columnCount={numColumns}
        height={someCalculatedHeight}
        cellRenderer={someCellRenderer}
        rowHeight={50}
        rowCount={numRows}
        width={adjustedWidth}
      />
    )}
  </ColumnSizer>,
  document.getElementById('example'),
);

您可以阅读文档和演示。

他们提供了 React-window 作为更轻量级的替代方案，但这个在发布和星级方面更受欢迎，所以我介绍了这个选项。你可以阅读哪个选项更适合你：react-window 与 react-virtualized 有何不同？。

它被 85,000 多名开发人员使用，在 GitHub 上拥有 25,000 多颗星。它的每周下载量也高达1700,000 多。

星级 React 虚拟化 ⭐️

16. React Google Analytics – React Google Analytics 模块。

这是一个 JavaScript 模块，可用于在使用 React 作为前端代码库的网站或应用程序中包含 Google Analytics 跟踪代码。

此模块对我们如何在前端代码中实现跟踪功能略有见解。我们的 API 比核心 Google Analytics 库略显冗长，以使代码更易于阅读。

从以下 npm 命令开始。

npm install react-ga --save

您可以这样使用它。

import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(window.location.pathname + window.location.search);


<!-- The core React library -->
<script src="https://unpkg.com/react@15.5.0/dist/react.min.js"></script>
<!-- The ReactDOM Library -->
<script src="https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js"></script>
<!-- ReactGA library -->
<script src="/path/to/bower_components/react-ga/dist/react-ga.min.js"></script>

<script>
  ReactGA.initialize('UA-000000-01', { debug: true });
</script>

您可以阅读文档并查看运行后的演示npm install npm start，然后转到port 8000 on localhost。

每周它的下载量超过 35 万次，在 GitHub (已存档) 上有超过 5000 颗星。

星级 React Google Analytics ⭐️

17. react-i18next – 正确完成 react 的国际化。

无需更改你的 webpack 配置或添加额外的 babel 转译器。

从以下 npm 命令开始。

npm i react-i18next

让我们比较一下代码结构。

在使用 react-i18next 之前。

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...

使用 react-i18next 之后。

...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...

您可以阅读文档并前往Codesandbox 上的互动游乐场。

超过 182,000 名开发人员使用该工具，在 GitHub 上拥有超过 8,000 颗星。该软件包的下载量高达 3,400,000 次，这进一步巩固了它的可信度，使其成为您下一个 React 项目的绝佳选择。

您还可以阅读 Locize 关于React Localization - Internationalize with i18next 的博客。

加星号 react-i18next ⭐️

呼！好长的有用项目清单啊。

我知道你还有更多想法，分享出来，让我们一起建设吧：D

现在就这些了！
在接手新项目时，开发人员的经验至关重要，这就是为什么有些项目有庞大的社区，而其他项目却没有。

React 社区非常庞大，因此请加入这些社区并使用这些开源项目将您的项目提升到一个新的水平。

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

菜单

分享

如果你使用 React 构建，你应该知道的 17 个库

总结

1. CopilotKit - 应用内 AI 聊天机器人、文本区域和 AI 代理

2. xyflow——使用 React 构建基于节点的 UI。

3. Zod + React Hook Form——验证的致命组合。

4. React DND – 用于 React 的拖放功能。

5. Cypress——快速测试浏览器中运行的内容。

6. Refine——面向企业的开源 Retool。

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

8. Watermelon DB——用于 React 和 React Native 的反应式和异步数据库。

9.Evergreen UI ——Segment 的 React UI 框架。

10. React Spring – 流畅的动画，提升 UI 和交互。

11. React Tweet——在你的 React 应用中嵌入推文。

12. React 360——使用 React 创建令人惊叹的 360 和 VR 内容。

13. React Advanced Cropper – 创建适合您网站的裁剪器。

14. Mobx——简单、可扩展的状态管理。

15. React Virtualized——渲染大型列表和表格数据。

16. React Google Analytics – React Google Analytics 模块。

17. react-i18next – 正确完成 react 的国际化。

系统设计面试中的 19 种微服务模式

用 CSS 单行代码改进（几乎）每个项目

介绍开发百科全书：面向开发人员的“维基百科”

如何在 2025 年成为 AI 开发人员（完整指南 + 资源）

50 个 DevOps 项目构想助您打造技能：从初学者到高级

系统设计基础 - 缓存

DevOps 中的脚本：从初学者到高级的完整指南

能帮你节省大量时间的 6 大 CSS 速查表

拖延者的荣耀指南：将浪费的时间转化为职业黄金的开源项目

如何使用 Ollama 和 Open WebUI 在本地运行 Llama 3