# gt-react: General Translation React SDK: Быстрый старт с React
URL: https://generaltranslation.com/ru/docs/react.mdx
---
title: Быстрый старт с React
description: Добавьте поддержку нескольких языков в ваше React-приложение менее чем за 10 минут
---
К концу этого руководства ваше React-приложение будет отображать контент на нескольких языках, а пользователи смогут переключать язык.
**Предварительные требования:**
* React-приложение (Vite, Create React App или аналогичное)
* Node.js 18+
**Нужна автоматическая настройка?** Выполните `npx gt@latest`, чтобы настроить всё с помощью [мастера настройки](/docs/cli/init). В этом руководстве описана ручная настройка.
***
## Шаг 1: Установите пакеты
`gt-react` — библиотека, которая отвечает за переводы в вашем приложении. `gt` — CLI-инструмент, который подготавливает переводы для продакшена.
```bash
npm i gt-react
npm i -D gt
```
```bash
yarn add gt-react
yarn add --dev gt
```
```bash
bun add gt-react
bun add --dev gt
```
```bash
pnpm add gt-react
pnpm add --save-dev gt
```
***
## Шаг 2: Создайте файл конфигурации перевода
Создайте файл **`gt.config.json`** в корне проекта. В нем библиотеке указывается, какие языки вы поддерживаете:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — язык, на котором написано ваше приложение (исходный язык).
* **`locales`** — языки, на которые вы хотите переводить приложение. Выберите любые из [списка поддерживаемых локалей](/docs/platform/supported-locales).
* **`files`** — указывает CLI, где сохранять файлы перевода. Путь `output` должен совпадать с путём импорта в функции `loadTranslations` (шаг 3).
**Используете Vite?** Укажите путь `output` как `"src/_gt/[locale].json"` вместо `"public/_gt/[locale].json"`. Vite импортирует файлы перевода как модули, поэтому они должны находиться в `src/`, а не в `public/`.
***
## Шаг 3: Создайте загрузчик переводов
`gt-react` полностью работает на клиенте, поэтому ему нужна функция для загрузки файлов перевода во время выполнения. Создайте файл `loadTranslations`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Эта функция загружает JSON-файлы переводов из каталога `public/_gt/`. Эти файлы CLI создаёт при запуске `npx gt translate`.
Поскольку в Vite файлы перевода находятся в `src/_gt/` (см. шаг 2), обновите путь импорта:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Конфигурация webpack в CRA блокирует динамический `import()` за пределами `src/`. Вместо этого используйте `fetch()`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const response = await fetch(`${process.env.PUBLIC_URL}/_gt/${locale}.json`);
if (!response.ok) throw new Error('Not found');
return await response.json();
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
***
## Шаг 4: Добавьте GTProvider в приложение
Компонент **`GTProvider`** предоставляет всему приложению доступ к переводам. Оберните приложение на корневом уровне:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Содержимое вашего приложения */}
);
}
```
`GTProvider` принимает конфигурацию и загрузчик переводов через пропсы. Он управляет состоянием локали и предоставляет переводы всем дочерним компонентам.
CRA ограничивает импорты файлами внутри `src/`, поэтому `import gtConfig from '../gt.config.json'` завершится ошибкой. Либо скопируйте `gt.config.json` в `src/`, либо укажите конфигурацию прямо в коде:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Содержимое вашего приложения */}
);
}
```
***
## Шаг 5: Отметьте контент для перевода
Теперь оберните любой текст, который нужно перевести, в компонент **``**. `` означает "translate":
```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.
);
}
```
Вы можете обернуть в `` сколько угодно JSX. Всё внутри него — текст, вложенные элементы и даже форматирование — переводится как единое целое.
***
## Шаг 6: Добавьте переключатель языка
Добавьте **``**, чтобы пользователи могли переключать язык:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (