# General Translation React SDKs (gt-react, gt-next): Обзор URL: https://generaltranslation.com/ru/docs/react/overview.mdx --- title: Обзор description: Узнайте об экосистеме React от General Translation, о том, как работает её единая модель перевода и какой быстрый старт выбрать для вашего фреймворка. --- General Translation интернационализирует экосистему React через единый API. Одни и те же компоненты, хуки и конфигурация работают независимо от того, создаёте ли вы одностраничное приложение на React, приложение на Next.js, приложение на TanStack Start или приложение на React Native. Это главная страница раздела React. Читайте дальше, чтобы разобраться в экосистеме и выбрать свой фреймворк, а затем перейти к соответствующему быстрому старту. ## Экосистема React [#ecosystem] У каждого фреймворка свой пакет, но все они предоставляют один и тот же translation API: * `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` *пока остаются экспериментальными и не рекомендуются для Production.* ## Общая модель перевода [#shared-model] Поскольку все пакеты построены на одном и том же ядре, достаточно один раз разобраться в этой модели, чтобы затем использовать её везде. Она состоит из следующих частей: * **Компонент** [``](/docs/react/reference/components/t) **.** Оберните любой JSX в ``, чтобы переводить его на месте, включая вложенные элементы и форматирование. `` переводит своё содержимое как единое целое. * **Хук** [`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` **.** Оберните им приложение, чтобы компоненты могли получать доступ к переводам и активной локали. Способ передачи в него переводов немного различается в зависимости от фреймворка, поэтому у каждого есть свой быстрый старт. * `gt.config.json`**.** Единый файл конфигурации в корне проекта, где задаются `defaultLocale`, целевые `locales` и место, куда записываются файлы перевода. * **CLI** `gt` **.** Пакет `gt` генерирует и загружает переводы. Выполните `npx gt 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), а также хуки локали тоже являются общими для всех фреймворков. ## Выберите фреймворк [#frameworks] Во всех вариантах используются одни и те же компоненты перевода и CLI, но инициализация и доставка переводов различаются. Начните с быстрого старта для вашего фреймворка: * **Создание React-приложения с серверным рендерингом:** инициализируйте `gt-react`, загружайте переводы на сервере и гидратируйте `GTProvider`. См. [Быстрый старт 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` и используйте `` в серверных и клиентских компонентах. См. [Быстрый старт 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 в корневом маршруте и гидратируйте `GTProvider` из 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) документирует каждый компонент, хук, функцию и параметр конфигурации. Оба раздела относятся ко всем фреймворкам, а различия между ними показаны во вкладках.