✨11 个 React 组件助你成为专业人士🦃🍁🥧

TL;DR

“Reactsgiving” 即将到来👨‍🌾

我已经收集了可用于构建强大的 Web 应用程序的最好的 React 组件。

每家都有自己的特色，
别忘了支持一下哦🌟

现在，让我们来吞下这段代码吧！🍽️

图片描述

1. CopilotPortal：将可操作的 GPT-Chatbot 嵌入到您的网络应用程序中。

将由 GPT 驱动的聊天机器人插入您的反应应用程序。

可以实时集成 RAG 与云和应用程序状态。

需要几行代码来嵌入。

import "@copilotkit/react-ui/styles.css";
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat">
      <CopilotSidebarUIProvider>

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}

Star CopilotPortal⭐️

2. ClickVote - 点赞、投票并评论任何内容

轻松将赞成票、喜欢票和评论添加到您的 Web 应用程序。

用于添加这些组件的简单反应代码。

import { ClickVoteProvider } from '@clickvote/react';
import { ClickVoteComponent } from '@clickvote/react';
import { LikeStyle } from '@clickvote/react';

<ClickVoteProvider>
    <ClickVoteComponent id={CONTEXT} voteTo={ID}>
        {(props) => <LikeStyle {...props} />}
    </ClickVoteComponent>
</ClickVoteProvider>

星级点击投票⭐️

3. React Flow——创建可拖拽工作流程的最佳方式！

专为构建基于节点的编辑器和交互式图表而定制的 React 组件。

它具有高度可定制性，提供拖放功能以实现高效的工作流程创建。

import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

<ReactFlow
    nodes={nodes}
    edges={edges}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    onConnect={onConnect}
>
    <MiniMap />
    <Controls />
    <Background />
</ReactFlow>

星形反应流⭐️

4. CopilotTextarea - React 应用中基于 AI 的写作

<textarea>使用 Github CopilotX 的功能来替代任何反应。

自动完成、插入、编辑。

可以实时提供任何上下文，或者由开发人员提前提供。

import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";


// Provide context...
useMakeCopilotReadable(...)

// in your component...
<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>`

星空副驾驶文本区域⭐️

5. Novu——为您的应用添加应用内通知！

简单的组件和 API，用于在一个地方管理所有通信渠道：电子邮件、短信、直接和推送

您可以使用此 React 组件向您的应用添加应用内通知。

import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
  IMessage,
} from "@novu/notification-center";

<NovuProvider
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
    <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
     </PopoverNotificationCenter>
</NovuProvider>

星新星⭐️

6. ReactIcons - 最受欢迎的 React 图标集合

轻松将 Font Awesome、Material Design 等流行图标添加到您的 React 应用中。

为开发人员提供简单而广泛的选择。

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

星号 ReactIcons ⭐️

7.React -dropzone——添加 HTML5 拖放 UI。

简单的 React hook 用于实现 HTML5 拖放区域，专注于文件交互。

它提供了一个易于使用的界面，用于向 React 应用程序添加文件拖放功能。

import React from 'react';
import {useDropzone} from 'react-dropzone';

const Basic = (props)=>{
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

export default Basic;

星级 ReactDropzone ⭐️

8. React ChartJS 2——创建和集成不同的图表。

用于在 React 应用程序内绘制图表的即插即用解决方案，类似于 Chart.js 功能。

实现动态、交互式图表。

适用于实时数据或预定义数据集。

import React from 'react';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',

      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',

      ],
      borderWidth: 1,
    },
  ],
};

export default function ShowChart() {
  return <Doughnut data={data} />;
}

星级 ReactChart ⭐️

9. Redux - 可预测状态容器库

在 JavaScript 应用程序中无缝添加 Redux，提供可靠的状态管理。

确保应用程序行为一致。

方便轻松调试和测试。

与各种库集成。

星号 ReactRedux ⭐️

10. Blueprint ——Palantir 的密集 UI 库

提供一组用于创建复杂且数据丰富的界面的组件和样式。

设计和开发具有现代外观和感觉的类似桌面的 Web 应用程序。

由 Palantir 开发

import React from 'react';
import '@blueprintjs/core/lib/css/blueprint.css';
import { H3, H4, OL, Pre } from "@blueprintjs/core";

function App() {
  return (
    <div style={{ display: 'block', width: 500, padding: 30 }}>
      <h4>ReactJS Blueprint HTML Elements Component</h4>
      Heading Component:
      <H4>H4 Size Heading</H4>
      <H3>H3 Size Heading</H3>
      <br></br>
      OrderList Component:
      <OL>
        <li>1st item</li>
        <li>2nd item</li>
      </OL>
      Pre Component:
      <Pre>Sample Pre</Pre>
    </div>
  );
}

星空蓝图⭐️

11.无头 UI - 可访问的 Tailwind 集成 UI 组件。

在 React 和 Vue 应用程序中创建可访问的 UI 组件。

适用于实时数据或预定义数据集，使其成为现代 Web 开发项目的宝贵补充

import React, { useState } from 'react';
import { Dialog } from '@headlessui/react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50">
      {/* The backdrop, rendered as a fixed sibling to the panel container */}
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
      {/* Full-screen container to center the panel */}
      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
        {/* Your dialog content goes here */}
      </div>
    </Dialog>
  );
}

星形 HeadlessUI ⭐️

保存这些组件，以便像朝圣者一样进行专业构建。

谢谢大家，节日快乐！

文章来源：https://dev.to/copilotkit/reacts-giving-11-react-components-for-aspiring-pros-eck