React聊天教程：如何构建聊天应用界面
开始：构建React聊天应用界面
随着越来越多的人依靠应用内聊天进行业务交易，拥有聊天应用变得至关重要对于许多公司来说。如果您想使用 React 构建精简且直观的聊天应用程序 UI，Sendbird 的 UIKit for React 是一个经过验证的解决方案。 UIKit 是一组丰富的、模块化的、预构建的 UI 组件，您可以使用它们在应用中创建现代通讯体验。该聊天 UI 套件可让您快速构建功能强大、可自定义的聊天应用程序 UI，而无需重新发明轮子。
在本教程结束时，您将构建一个如下所示的聊天应用程序 UI：
使用 React Sendbird UIKit，您只需几分钟即可通过 3 个简单步骤创建功能强大且美观的聊天应用 UI：< /span>
将 React 聊天 UI 添加到您的应用程序
这就是创建用户友好的消息传递 UI 所需的全部！在我们构建了基本的聊天应用程序 UI 后，我们还将介绍聊天应用程序自定义。
使用模块化界面组件构建聊天应用界面的注意事项
如今，人们期望无缝且引人注目的用户界面。要构建自定义 UI，模块化 UI 组件至关重要。什么是 UI 组件？ UI 组件是应用程序 UI 的一个小型、标准化且可互换的部分（或 模块）。 UI 组件类似于乐高积木，几乎可以用您喜欢的任何方式组装它们来构建您选择的 UI。
借助 Sendbird 的预构建聊天 UI 组件，您可以在几分钟内构建令人惊叹的聊天应用程序 UI。您可以使用 Sendbird UIKit 版本 3 来完成此操作，该版本比之前的整体版本更具可定制性。
下面是从版本 2 的整体架构到版本 3 的模块化聊天 UI 架构的变化的说明：
由于聊天应用程序 UI 分为较小的模块，例如频道列表、标题、搜索栏和各个频道信息部分，因此模块化聊天 UI 架构（图 2）可实现更大的可定制性和灵活性。
在移动设备上，模块化架构如下所示：
如果您想详细了解成功的现代聊天应用 UI 实现是什么样子，以及使用模块化 UI 组件进行构建的优势，请参阅此内容博客。它包含您需要的所有详细信息！
第1步：创建Sendbird账户
如果您没有 Sendbird 帐户，请首先创建您的免费帐户。
从那里，Sendbird 将提示您创建一个新应用程序。选择默认值，指定应用程序名称，然后选择区域。
接下来，您将被转到您的帐户信息中心。从您的信息中心复制应用程序 ID。稍后您将需要它。
在用户菜单下，创建用户并保存用户 ID。在此示例中，我们需要的用户 ID 是 Test1。如果您想创建更多用户进行测试，请立即这样做。
我们现在拥有应用程序 ID 和用户 ID。 我们的设置已完成！
第2步：设置你的React聊天应用
接下来，我们将使用 React 18 和TypeScript 创建一个示例应用。我们将使用 Create React App，这是一种 Meta 支持的方式来创建单页 React 应用程序。请随意替换您选择的 React 开发环境。
我们将使用 Create React App 为我们提供一个入门模板，创建一个名为 sendbird-chat-app 的项目。您可以指定您选择的任何名称。在终端中输入以下命令：
创建项目后，导航到项目目录并安装 Sendbird UIKit for React。
由于我们使用 TypeScript，因此我们必须包含 UIKit 的类型定义，以便我们的 TypeScript 服务器能够检测到它们。为此，我们需要修改 tsconfig.json 文件，在 属性下添加 node_modules/@sendbird/uikit-react/index.d.ts。生成的 文件应如下所示：includetsconfig.json
从这里开始，我们就准备好实现我们的聊天应用程序了。打开 src/App.tsx 并将其内容替换为以下内容：
确保输入之前保存的应用程序 ID 和用户 ID。用户 ID 应该是您在 Sendbird 仪表板中创建的用户之一的 ID。
接下来，我们替换src/App.css的内容。我们将使应用程序的大小与我们的浏览器窗口相匹配。
现在，在终端中运行以下命令：
从那里导航到本地开发环境（默认情况下为 http://localhost:3000）。假设一切顺利，您应该看到 React 聊天界面！
第3步：定制你的React聊天界面
现在让我们看一些自定义聊天 UI 的示例。
例如，让我们将用户列表移至屏幕右侧，并将主聊天界面放在左侧。
为此，我们首先将主App 窗口切换为使用 CSS Flexbox：
接下来，我们将 App.tsx 中的代码替换为以下内容。再次强调，请记住输入您的应用程序 ID 和用户 ID。
在此示例中，我们采用了 App 组件，并将其替换为三个组件和一个 React 状态。 SendBirdProvider 是一个上下文提供程序，它将聊天 SDK 传递给子组件。 Channel 和 ChannelList 是 UIKit 中的 UI 组件。我们管理的状态是当前频道 URL，它跟踪您当前正在查看的聊天频道。
转到本地开发环境，您应该看到频道列表现在已移至右侧：
此代码可以作为许多自定义的基础。请注意，自定义的一种方法是修改道具。例如，如果我们想用我们自己的自定义版本替换 ChannelList 的标头，我们可以使用 renderHeader 属性来实现：
这将产生如下所示的标头：
也许您想实现深色主题。您可以通过 中的 theme 属性来执行此操作。SendBirdProvider
瞧！我们进行了一次黑暗主题的聊天。
请记住，UIKit 是模块化的，这使得自定义具有更大的灵活性。如果我们只想自定义聊天端，我们可以这样做。如果我们想添加其他模块，例如消息搜索和消息线程，我们也可以这样做。有关详细信息，请参阅文档。
创建一个聊天应用界面并在React中发送你的第一条聊天信息
本教程演示了使用 Sendbird Chat 和 React 的 UIKit 创建聊天应用 UI 是多么简单和高效。我们在几分钟内快速构建并定制了功能性 UI。我们还探索了一些 UIKit 的自定义选项，演示了如何修改布局、用自定义版本替换标题以及应用深色主题。凭借 UIKit 的模块化和灵活性，您可以轻松定制 React 聊天界面，以满足您的特定需求和偏好。
现在您已经有了聊天 UI，请按照此分步操作发送您的第一条消息教程！您将了解如何使用 Sendbird 仪表板来管理您的聊天应用程序、创建新用户以及监控应用程序的性能。如果您遇到困难，可以从 Sendbird 社区获取帮助，与开发者和 Sendbird 专家互动。如需了解更多信息，请参阅文档或直接联系我们 - 我们的专家随时准备提供帮助！
快乐的聊天应用程序构建！ 💬