# General Translation React SDKs (gt-react, gt-next, gt-react-native): Интернационализация React SPA
URL: https://generaltranslation.com/ru/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как помечать JSX и строки для перевода в настроенном React SPA.

После запуска инициализатора SPA до точки входа приложения компоненты и
строки уровня модуля могут сразу использовать активную локаль. На этой странице собраны
правила реализации, относящиеся к этой модели запуска.

## Перевод JSX [#jsx]

Оберните целые блоки переводимого JSX
[компонентом `<T>`](/docs/react/reference/components/t). Структура внутри
каждого блока должна оставаться статичной; никогда не вкладывайте один
[`<T>`](/docs/react/reference/components/t) в другой:

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

Используйте [`<Var>`](/docs/react/reference/components/var) для динамических
значений без форматирования. Используйте [`<Currency>`](/docs/react/reference/components/currency),
[`<DateTime>`](/docs/react/reference/components/datetime) и
[`<Num>`](/docs/react/reference/components/num), если значение необходимо форматировать
с учётом локали.

Условный контент также должен иметь стабильную структуру перевода. Используйте
[`<Branch>`](/docs/react/reference/components/branch) для именованных вариантов и
[`<Plural>`](/docs/react/reference/components/plural) для текста, зависящего от count.
Если условие влияет на грамматику за пределами одного слова, включайте в каждую ветвь
полные предложения.

Полные примеры приведены в руководствах [Перевод JSX](/docs/react/guides/translating-jsx),
[Форматирование переменных](/docs/react/guides/formatting-variables) и
[Обработка форм множественного числа и ветвей](/docs/react/guides/handling-plurals-and-branches).

## Перевод строк [#strings]

В инициализированном SPA для строк предпочтительно использовать [`t()`](/docs/react/reference/functions/t-function).
Загрузочный модуль ожидает загрузки переводов перед импортом
приложения, поэтому [`t()`](/docs/react/reference/functions/t-function) также работает
на уровне модуля:

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

Исходное сообщение должно быть статическим. Передавайте динамические значения отдельно, используя синтаксис ICU:

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

Селектор локали в SPA перезагружает приложение после смены локали, поэтому
переводы на уровне модуля повторно вычисляются для новой локали. См.
[Перевод строк](/docs/react/guides/translating-strings), где описаны контекст и
паттерны общих сообщений.

## Добавьте выбор локали [#locale-selector]

Добавьте [компонент `<LocaleSelector>`](/docs/react/reference/components/locale-selector),
который позволяет пользователям выбрать язык:

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

Он считывает локали, настроенные для инициализатора, сохраняет выбранную локаль и
перезагружает SPA, чтобы переводы на уровне модуля использовали новую локаль.

## Проверьте реализацию [#validate]

После разметки контента проверьте синтаксис перевода:

```bash
npx gt validate
```

Затем запустите проверку типов и production-сборку приложения. Перед
генерацией переводов исправьте ошибки синтаксиса переводов, отсутствие файлов локалей и ошибки импорта бандлера.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.