> ## Documentation Index
> Fetch the complete documentation index at: https://injectivelabs-docs-ai-sdk.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 配置 React

## React - 用于构建用户界面的库

React 目前是最流行的 UI 框架之一。我们将帮助你配置 React + Vite 构建器与 `@injectivelabs` 包以及一些 polyfill，因为你需要它们来与加密钱包交互。

### 1. 安装 React

按照 [Vite 文档](https://vitejs.dev/guide/)中的入门指南设置你的应用。

```bash theme={null}
$ npm create vite@latest
```

### 2. 安装 @injectivelabs 包

你可以使用 yarn 安装 @injectivelabs 包。

```bash theme={null}
$ yarn add @injectivelabs/sdk-ts @injectivelabs/networks @injectivelabs/ts-types @injectivelabs/utils

## 如果你需要钱包连接
$ yarn add @injectivelabs/wallet-strategy
```

这些是 `injective-ts` monorepo 中最常用的包。

### 3. 配置 Vite 并添加 polyfill

首先，添加所需的 polyfill 包和 buffer

<Callout icon="info" color="#07C1FF" iconType="regular">
  任何加密相关去中心化应用的主要依赖之一是 `Buffer`。为了确保我们将 `Buffer` 添加到项目中，我们可以将其作为依赖项安装，然后将其导入到 global/window 对象。

  下面分享了示例 `vite.config.ts`。
</Callout>

```bash theme={null}
$ yarn add @bangjelkoski/node-stdlib-browser
$ yarn add -D @bangjelkoski/vite-plugin-node-polyfills
$ yarn add buffer
```

最后，确保在 `main.tsx` 文件顶部导入 `buffer`

```typescript theme={null}
import { Buffer } from "buffer";

if (!window.Buffer) {
    window.Buffer = Buffer; // 可选，用于期望 Buffer 为全局变量的包
}
```

### 4. 使用状态管理

React 有很多不同的状态管理器，选择你要使用的并安装它。你可以使用内置的 `Context API` 进行状态管理，而无需安装第三方解决方案。首选的第三方状态管理器是 `Redux` 和 `Zustand`。

```bash theme={null}
$ yarn add zustand
```

### 5. vite.config.ts

最后一步是配置 Vite 使用我们之前安装的 `node-polyfills`。

打开 `vite.config.ts` 并在 `plugins` 数组中添加 `node-polyfills`。

你的配置应该如下所示：

```ts theme={null}
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "@bangjelkoski/vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills({ protocolImports: true })],
  define: {
    global: "globalThis",
  },
  resolve: {
    alias: {
      // 其他
      buffer: "buffer/",
    },
  },
  optimizeDeps: {
    include: ["buffer"],
  },
});
```

### 8. 启动我们的应用

最后，你可以使用 `yarn dev` 在本地启动应用，或使用 `yarn build` 构建生产版本，然后可以部署到任何静态页面托管服务，如 Netlify、Vercel 等。