# gt-react: General Translation React SDK: Быстрый старт для SPA
URL: https://generaltranslation.com/ru/docs/react/tutorials/quickstart-spa.mdx
---
title: Быстрый старт для SPA
description: Добавьте несколько языков в своё одностраничное React-приложение менее чем за 10 минут
---
К концу этого руководства ваше одностраничное React-приложение будет отображать содержимое на нескольких языках, а пользователи смогут переключать язык через переключатель языка.
В одностраничном приложении `gt-react` работает полностью в браузере — вы инициализируете его один раз при запуске с помощью `initializeGTSPA()`, и компонент provider не требуется.
**Предварительные требования:**
* React-приложение с клиентским рендерингом (Vite, webpack или аналогичный инструмент)
* Node.js 18+
**Нужна автоматическая настройка?** Запустите `npx gt@latest`, чтобы настроить всё с помощью [мастера настройки](/docs/cli/init). В этом руководстве рассматривается ручная настройка.
**Приложение с серверным рендерингом?** Если ваше приложение рендерится на сервере, вместо этого следуйте [краткому руководству по React](/docs/react).
***
## Шаг 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/supported-locales).
* **`files`** — указывает CLI, где сохранять файлы перевода. Путь `output` должен совпадать с путём импорта в функции `loadTranslations` (шаг 3).
**Расположение файла:** Сборщики, такие как Vite, импортируют файлы перевода как модули, поэтому они должны находиться внутри `src/`.
***
## Шаг 3: Создайте загрузчик переводов
В SPA для `gt-react` нужна функция, которая загружает файл перевода в браузере во время выполнения. Создайте файл `loadTranslations`:
```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`.
***
## Шаг 4: Инициализируйте библиотеку
Вызовите **`initializeGTSPA`** один раз при запуске — до рендеринга приложения. Она принимает вашу конфигурацию и загрузчик переводов, определяет локаль пользователя и загружает соответствующие переводы.
Самый надежный вариант — небольшой модуль точки входа, который сначала инициализирует GT, а затем загружает остальную часть приложения:
```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
await initializeGTSPA({
defaultLocale: gtConfig.defaultLocale,
locales: gtConfig.locales,
loadTranslations,
});
await import('./main'); // рендерим приложение только после того, как GT будет готов
```
```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`.
`initializeGTSPA` запускается один раз при старте — конфигурация остается неизменной на протяжении всего времени работы приложения. После того как его выполнение завершится, каждый компонент и hook в вашем приложении сможет получать доступ к переводам. **Вам не нужно оборачивать приложение в provider.**
**Нужны переводы в реальном времени во время разработки?** Следуйте [руководству по переводам для разработки SPA](/docs/react/tutorials/spa-development-translations), чтобы добавить compiler и учетные данные для разработки.
***
## Шаг 5: Пометьте текст для перевода
Теперь оберните любой текст, который хотите перевести, в компонент **``**. `` означает "перевести":
```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, сколько нужно. Всё внутри него — текст, вложенные элементы и даже форматирование — переводится как единое целое.
Для строк вне React-компонентов используйте **`t()`**. Она работает на уровне модуля, потому что `initializeGTSPA()` загружает переводы раньше остальной части приложения:
```ts title="src/navigation.ts"
import { t } from 'gt-react';
export const navigation = [
{ label: t('Home'), href: '/' },
{ label: t('About'), href: '/about' },
];
```
***
## Шаг 6: Добавьте переключатель языка
Добавьте **``**, чтобы пользователи могли переключать язык:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (