# General Translation Knowledge Base: Как перевести React-приложение? URL: https://generaltranslation.com/ru/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Перевод React-приложения состоит из двух этапов — интернационализации компонентов, чтобы они отображались на языке пользователя, и перевода каждой строки на все поддерживаемые языки. gt-react от General Translation переводит JSX на месте в компоненте ``, а npx gt translate создаёт по одному файлу на каждый язык. Category: Интернационализация Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Перевод React-приложения сводится к двум задачам: интернационализации (i18n), благодаря которой компоненты отображаются на языке пользователя, и переводу каждой строки на все поддерживаемые языки. Сложность в том, что текст находится внутри JSX вперемешку с разметкой, переменными и формами множественного числа, правила которых в разных языках отличаются (в английском 2 формы, в арабском — 6). При стандартной настройке каждую строку выносят в ключ, например `t('home.welcome')`, а для каждого языка заводят отдельный JSON-файл, который приходится держать в синхронизации с остальными. Если переводить текст без окружающего UI, кнопка «Save» может вернуться на немецком как *sparen* (экономить деньги) вместо *speichern* (сохранить файл). ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 с) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## Способы перевести React-приложение | Подход | Сильные стороны | Что остаётся на вас | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Библиотека интернационализации на основе ключей ([`i18next`](/kb/general-translation-vs-i18next) с `react-i18next` или [`react-intl`](/kb/general-translation-vs-react-intl)) | Зрелая среда выполнения для рендеринга переводов, выбора форм множественного числа и форматирования значений | Замена строк ключами, синхронизация JSON-файлов для каждого языка и подготовка всех переводов | | [Lingui](/kb/general-translation-vs-lingui) | Макрос `` позволяет держать текст прямо в коде, а `lingui extract` создаёт каталог для каждого языка | Перевод каждого каталога — вручную или через подключённый сервис — и повторный запуск extract и compile при каждом изменении текста | | Система управления переводами ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | Веб-редактор, синхронизированный с вашим репозиторием, где переводчики работают со скриншотами, глоссарием и памятью переводов | Библиотека интернационализации и файлы ключей в коде, настройка синхронизации и ожидание переводчиков перед каждым релизом | | General Translation (`gt-react` и CLI `gt`) | [``](/docs/react/reference/components/t) переводит JSX на месте без ключей, а [`npx gt translate`](/docs/cli/reference/commands/translate) создаёт по одному файлу на язык, используя окружающую структуру JSX как контекст | Обёртывание текста в [``](/docs/react/reference/components/t), однократная настройка (языки в `gt.config.json`, загрузчик, входной файл, вход в аккаунт и идентификатор проекта) и повторный запуск [`npx gt translate`](/docs/cli/reference/commands/translate) (локально или в CI) при изменении контента | Если в приложении немного строк и они редко меняются, достаточно одной библиотеки на основе ключей с JSON-файлами, написанными вручную. Lingui подойдёт, если вы хотите держать текст прямо в коде и у вас есть переводчики, которые будут заполнять каталоги, а система управления переводами — если команда локализации вручную переводит каждый релиз. Выбирайте General Translation, если приложение постоянно меняется и каждый релиз должен выходить сразу на всех языках. ## Перевод React-приложения с помощью General Translation Библиотека `gt-react` и CLI `gt` от General Translation с открытым исходным кодом позволяют перевести одностраничное приложение (SPA) на React, например проект на Vite или webpack. Мастер настройки `npx gt@latest` может сам настроить входной файл Vite и загрузку переводов (экспериментальная функция). Чтобы выполнить настройку вручную: 1. Установите `gt-react` и CLI `gt`. 2. Перечислите нужные языки в `gt.config.json`. 3. Добавьте функцию [`loadTranslations`](/docs/react/reference/functions/load-translations) и вызовите [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) в небольшом входном файле, чтобы переводы загружались до рендеринга приложения. 4. Оберните текст в компонент [``](/docs/react/reference/components/t): ```tsx title="src/components/Welcome.tsx" import { T } from 'gt-react'; export default function Welcome() { return (

Welcome to my app

This content will be translated automatically.
); } ``` 5. Войдите с помощью [`npx gt login`](/docs/cli/reference/commands/login) и укажите идентификатор проекта. 6. Выполните [`npx gt translate`](/docs/cli/reference/commands/translate), чтобы создать по одному файлу перевода для каждого языка. Проп `context` компонента [``](/docs/react/reference/components/t) помогает устранить неоднозначность слов вроде «Save», а Glossary и пользовательские промпты в панели управления обеспечивают единообразие терминологии и тона. Для приложений с [серверным рендерингом React](/docs/react/react-quickstart), на [фреймворке React Router](/docs/react/react-router-quickstart) и на [Next.js](/docs/react/nextjs-quickstart) (с `gt-next`) есть отдельные руководства по быстрому старту, а все шаги для SPA описаны в руководстве [Быстрый старт SPA для React](/docs/react/react-spa-quickstart). ## Related questions - [Как добавить i18n в приложение Next.js на App Router?](https://generaltranslation.com/ru/kb/add-i18n-to-nextjs.mdx): Начните с gt init, чтобы настроить General Translation в поддерживаемом проекте на App Router, затем разметьте исходное содержимое, создайте переводы и проверьте переключение языка. gt-next хранит тексты прямо в JSX вместе с контекстом перевода, а CLI, редактор в панели управления и Locadex берут на себя генерацию, проверку и последующие обновления. В этом руководстве также показана явная настройка с локальными файлами. - [Как перевести приложение на React Native?](https://generaltranslation.com/ru/kb/translate-react-native-app.mdx): Разметьте текст в компонентах, сгенерируйте файл перевода для каждого языка, добавьте полифилы Intl и загружайте файл для языка устройства. С экспериментальной библиотекой gt-react-native от General Translation вы оборачиваете текст в ``, Babel-плагин добавляет полифилы, а npx gt translate создаёт файлы. - [Можно ли делать i18n без файлов перевода?](https://generaltranslation.com/ru/kb/i18n-without-translation-files.mdx): Да. Библиотеки gt-react и gt-next от General Translation обеспечивают i18n для React и Next.js без ключей перевода и без отдельного JSON-файла для каждого языка, который приходится поддерживать. Тексты остаются встроенными в JSX внутри компонента ``, а команда gt translate генерирует переводы для каждого языка во время сборки, учитывая контекст из вашего кода. Locadex может поддерживать их в актуальном состоянии через пул-реквесты. - [Как перевести строки вне JSX?](https://generaltranslation.com/ru/kb/translate-strings-outside-jsx.mdx): Пропускайте каждую строку, которая не является дочерним элементом JSX (например, плейсхолдер или константу в области видимости модуля), через функцию перевода в том месте, где выполняется её рендеринг. Такую функцию возвращает хук useGT от General Translation, а msg вместе с useMessages переводит константы, определённые вне компонента. - [Как работать с формами множественного числа в React?](https://generaltranslation.com/ru/kb/how-to-handle-plurals-in-react.mdx): Чтобы работать с формами множественного числа в React, задайте для каждого языка по одному предложению на каждую форму множественного числа и выбирайте нужное по правилам множественного числа этого языка — ведь в английском 2 формы, в русском 4, а в арабском 6. Компонент `` от General Translation в gt-react и gt-next принимает формы на исходном языке, а General Translation генерирует формы, нужные каждому языку перевода. ## Previous and next questions - Previous question: [Как перевести Google Slides?](https://generaltranslation.com/ru/kb/translate-google-slides.mdx) - Next question: [Как перевести контент в Sanity?](https://generaltranslation.com/ru/kb/translate-sanity-content.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ru/kb/sitemap.md) for every article.