# General Translation React SDKs (gt-react, gt-next, gt-react-native): Обзор URL: https://generaltranslation.com/ru/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 без Expo. См. [Быстрый старт React Native](/docs/react/react-native-quickstart). *Примечание:* `gt-tanstack-start` и `gt-react-native` являются экспериментальными. Перед выбором одного из них ознакомьтесь с соответствующими руководствами по быстрому старту и актуальными ограничениями. ## Единая модель перевода [#shared-model] Поскольку все React i18n-библиотеки используют одни и те же основные компоненты и хуки, нужно освоить одну модель перевода. Вот её основные части: * [``](/docs/react/reference/components/t) **компонент.** Оберните любой JSX в [``](/docs/react/reference/components/t), чтобы переводить его на месте, включая вложенные элементы и форматирование. [``](/docs/react/reference/components/t) переводит своё содержимое как единое целое. * [`useGT`](/docs/react/reference/hooks/use-gt) **хук.** Переводите отдельные строки — плейсхолдеры, значения `aria-label`, alt-текст — с помощью функции, которую он возвращает. Вызывайте его так: `const gt = useGT();`, затем `gt('Hello, world!')`. В асинхронных компонентах App Router используйте [`getGT`](/docs/react/nextjs/reference/functions/get-gt) из `gt-next/server`. * [`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), чтобы перевести проект через API General Translation. Компоненты переменных ([``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency) и [``](/docs/react/reference/components/datetime)) также являются общими, как и [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/branch), [``](/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` и используйте [``](/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:** инициализируйте General Translation в `src/router.tsx` и гидратируйте [`GTProvider`](/docs/react/reference/components/gt-provider) из loader корневого маршрута. См. [Быстрый старт TanStack Start](/docs/react/tanstack-start-quickstart). * **Создание приложения на React Native:** инициализируйте его в точке входа и добавьте Babel-плагин для полифилов. См. [Быстрый старт React Native](/docs/react/react-native-quickstart). После настройки в разделе [Руководства](/docs/react/guides/configuring) описаны общие workflows — перевод JSX и строк, форматирование переменных, множественное число, словари и управление локалями, — а [Справочник](/docs/react/reference/config) документирует каждый компонент, хук, функцию и параметр конфигурации. Оба раздела относятся ко всем фреймворкам, а различия между ними показаны во вкладках.