# General Translation React SDKs (gt-react, gt-next, gt-react-native): Быстрый старт SPA для React
URL: https://generaltranslation.com/ru/docs/react/react-spa-quickstart.mdx
---
title: Быстрый старт SPA для React
description: Добавьте несколько языков в одностраничное React-приложение с General Translation менее чем за 10 минут.
related:
links:
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations
---
К концу этого руководства ваше одностраничное React-приложение будет отображать контент на нескольких языках, а пользователи смогут переключать язык с помощью переключателя языка.
В одностраничном приложении `gt-react` работает целиком в браузере — вы инициализируете его один раз при запуске с помощью [`initializeGTSPA()`](/docs/react/reference/config#initialize-spa), и компонент provider не требуется.
**Требования:**
* React-приложение с клиентским рендерингом (Vite, webpack или аналогичный инструмент)
* Node.js 18+
**Совет:** Запустите `npx gt@latest`, чтобы настроить начальную загрузку Vite и загрузку переводов с помощью [мастера настройки](/docs/cli/quickstart). В этом руководстве описана ручная настройка.
**Примечание:** Если ваше приложение рендерится на сервере, используйте вместо этого руководство [Быстрый старт React](/docs/react/react-quickstart).
## Быстрый старт [#quickstart]
### 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": "src/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — язык, на котором написано ваше приложение (исходный язык).
* **`locales`** — языки, на которые вы хотите переводить приложение. Выберите любой из [списка поддерживаемых локалей](/docs/platform/dashboard/reference/supported-locales).
* **`files`** — указывает CLI, где сохранять файлы перевода. Путь `output` должен совпадать с путём импорта в вашей функции [`loadTranslations`](/docs/react/reference/functions/load-translations) (шаг 3).
**Примечание:** Бандлеры, такие как Vite, импортируют файлы перевода как модули, поэтому файлы перевода должны находиться внутри `src/`.
### 3. Создайте загрузчик переводов
В SPA для `gt-react` нужна функция, которая будет загружать файлы перевода в браузере во время выполнения. Создайте файл [`loadTranslations`](/docs/react/reference/functions/load-translations):
```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 {};
}
}
```
Эта функция загружает JSON-файлы перевода из каталога `src/_gt/`. CLI создаёт эти файлы при запуске [`npx gt translate`](/docs/cli/reference/commands/translate).
### 4. Инициализируйте библиотеку
Вызовите **[`initializeGTSPA`](/docs/react/reference/config#initialize-spa)** один раз при запуске, до рендеринга приложения. Она принимает вашу конфигурацию и загрузчик переводов, определяет локаль пользователя и загружает соответствующие переводы.
Самый надёжный вариант — небольшой входной модуль, который сначала инициализирует GT, а затем загружает остальную часть приложения. Это позволяет переводить содержимое на уровне модуля.
```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
await initializeGTSPA({
...gtConfig,
loadTranslations,
});
await import('./main'); // рендерим приложение только после того, как GT будет готов
```
CommonJS не поддерживает `await` на верхнем уровне. Оберните инициализацию в асинхронную стартовую функцию, а затем динамически импортируйте приложение. Это сохраняет асинхронную границу, необходимую для вызовов [`t()`](/docs/react/reference/functions/t-function) на уровне модуля.
```js title="src/index.js"
const { initializeGTSPA } = require('gt-react');
const gtConfig = require('../gt.config.json');
async function loadTranslations(locale) {
try {
return require(`./_gt/${locale}.json`);
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
async function start() {
await initializeGTSPA({
...gtConfig,
loadTranslations,
});
await import('./main');
}
start().catch(console.error);
```
**Предупреждение:** Не подключайте `main` до инициализации. Иначе вызовы [`t()`](/docs/react/reference/functions/t-function) на уровне модуля выполнятся до того, как переводы будут готовы.
```tsx title="src/main.tsx"
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(
);
```
Затем обновите тег модульного скрипта в вашем `index.html`, чтобы он указывал на новую точку входа: измените его `src` с `/src/main.tsx` на `/src/index.ts`.
```html title="index.html"
```
[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) запускается один раз при старте — конфигурация остаётся неизменной на всё время работы приложения. После этого переводы можно получать в любом модуле. **Оборачивать приложение в provider не нужно.**
**Совет:** Следуйте руководству [Разработка с переводами SPA](/docs/react/guides/developing-spa-translations), чтобы добавить компилятор и учётные данные для разработки.
### 5. Пометьте контент для перевода
Теперь оберните любой текст, который нужно перевести, в компонент **[``](/docs/react/reference/components/t)**. [``](/docs/react/reference/components/t) означает «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.
);
}
```
Вы можете обернуть в [``](/docs/react/reference/components/t) столько JSX, сколько нужно. Всё внутри — текст, вложенные элементы, даже форматирование — переводится как единое целое.
Для строк вне компонентов React используйте **[`t()`](/docs/react/reference/functions/t-function)**. Это работает на уровне модуля, потому что [`initializeGTSPA()`](/docs/react/reference/config#initialize-spa) загружает переводы раньше остальной части приложения:
```ts title="src/navigation.ts"
import { t } from 'gt-react';
export const navigation = [
{ label: t('Home'), href: '/' },
{ label: t('About'), href: '/about' },
];
```
### 6. Добавьте переключатель языка
Добавьте **[``](/docs/react/reference/components/locale-selector)**, чтобы пользователи могли переключать язык:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (