# General Translation React SDKs (gt-react, gt-next, gt-react-native): 概览
URL: https://generaltranslation.com/zh/docs/react/overview.mdx
---
title: 概览
description: 了解哪种 React 库和快速入门适合你的框架。
---

General Translation 的 React 国际化库在 React SPA、Next.js App Router、Next.js Pages Router、TanStack Start 和 React Native 之间共享组件、钩子和配置。

这是 React 部分的入口页。继续阅读，了解这一生态系统并选择适合你的框架，然后按照对应的快速入门进行操作。

## React 生态系统 [#ecosystem]

每个框架系列都有各自的包：

* `gt-react` — 用于服务器端渲染的 React 应用和单页应用 (SPA) ，例如 Vite 或 Create React App。参见 [React 快速入门](/docs/react/react-quickstart) 或 [React SPA 快速入门](/docs/react/react-spa-quickstart)。
* `gt-next` — 用于 Next.js App Router 和 Pages Router 应用。参见 [Next.js App Router 快速入门](/docs/react/nextjs-quickstart) 或 [Next.js Pages Router 快速入门](/docs/react/nextjs-pages-router-quickstart)。
* `gt-tanstack-start` — 用于 TanStack Start 应用。参见 [TanStack Start 快速入门](/docs/react/tanstack-start-quickstart)。
* `gt-react-native` — 用于 React Native 应用，包括 Expo 和原生 React Native CLI。参见 [React Native 快速入门](/docs/react/react-native-quickstart)。

*注意：*`gt-tanstack-start` 和 `gt-react-native` 均为实验性功能。在选择其中任一项之前，请查阅其快速入门以了解当前限制。

## 共享翻译模型 [#shared-model]

由于每个 React i18n 库共享相同的核心组件和钩子，你只需要学习一个翻译模型。重要部分包括：

* [`<T>`](/docs/react/reference/components/t) **组件。** 用 [`<T>`](/docs/react/reference/components/t) 包裹任意 JSX，即可对其进行原地翻译，包括嵌套元素和格式。[`<T>`](/docs/react/reference/components/t) 会将其内容作为一个整体进行翻译。
* [`useGT`](/docs/react/reference/hooks/use-gt) **钩子。** 使用它返回的函数来翻译独立字符串——占位符、`aria-label` 值、alt 文本等。调用方式为 `const gt = useGT();`，然后调用 `gt('Hello, world!')`。在异步 App Router 组件中，请使用来自 `gt-next/server` 的 [`getGT`](/docs/react/nextjs/reference/functions/get-gt)。
* [`GTProvider`](/docs/react/reference/components/gt-provider) **组件。** 包裹你的应用，让组件能够访问翻译内容和当前区域设置。向它传入翻译内容的方式会因框架而略有不同，这也是为什么每个框架都有各自的快速入门。
* `gt` **CLI。** `gt` 包会生成并下载翻译。其 [`gt.config.json`](/docs/cli/reference/config) 文件用于声明 `defaultLocale`、目标 `locales` 以及翻译输出路径。运行 [`npx gt translate`](/docs/cli/reference/commands/translate)，即可通过 General Translation API 翻译你的项目。

变量组件 ([`<Var>`](/docs/react/reference/components/var)、[`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency) 和 [`<DateTime>`](/docs/react/reference/components/datetime)) 也是共享的，此外还包括 [`<Plural>`](/docs/react/reference/components/plural)、[`<Branch>`](/docs/react/reference/components/branch)、[`<Derive>`](/docs/react/reference/components/derive) 以及诸如 [`useLocale`](/docs/react/reference/hooks/use-locale) 的区域设置钩子。

## 选择你的框架 [#frameworks]

每种设置都使用相同的翻译组件和 CLI，但初始化方式和翻译交付方式有所不同。请先从适合你所用框架的快速入门指南入手：

* **构建服务器端渲染的 React 应用：**初始化 `gt-react`，在服务器上加载翻译，并水合 [`GTProvider`](/docs/react/reference/components/gt-provider)。参见 [React 快速入门](/docs/react/react-quickstart)。
* **构建 React SPA (Vite、Create React App) ：**在渲染前于浏览器中初始化 `gt-react`。参见 [React SPA 快速入门](/docs/react/react-spa-quickstart)。
* **构建 Next.js App Router 应用：**添加 `withGTConfig` 插件，并在服务端组件和客户端组件中使用 [`<T>`](/docs/react/reference/components/t)。参见 [Next.js App Router 快速入门](/docs/react/nextjs-quickstart)。
* **构建 Next.js Pages Router 应用：**通过页面属性加载区域设置和翻译。参见 [Next.js Pages Router 快速入门](/docs/react/nextjs-pages-router-quickstart)。
* **构建 TanStack Start 应用：**在 `src/router.tsx` 中初始化 General Translation，并通过 root 路由加载器水合 [`GTProvider`](/docs/react/reference/components/gt-provider)。参见 [TanStack Start 快速入门](/docs/react/tanstack-start-quickstart)。
* **构建 React Native 应用：**在你的入口文件中初始化，并添加用于 polyfill 的 Babel 插件。参见 [React Native 快速入门](/docs/react/react-native-quickstart)。

完成设置后，[指南](/docs/react/guides/configuring)涵盖了通用工作流——翻译 JSX 和字符串、格式化变量、处理复数、使用 dictionaries，以及管理 locales——而 [参考文档](/docs/react/reference/config) 则记录了每个组件、钩子、函数和配置选项。两者都适用于所有框架，框架间的差异会在选项卡中显示。