# gt-react: General Translation React SDK: Переход
URL: https://generaltranslation.com/ru/docs/react/guides/migration.mdx
---
title: Переход
description: Узнайте, как перевести проект на gt-react
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого отредактируйте шаблон в content/docs-templates/. */}


## Обзор

В этом руководстве описаны шаги, необходимые для перевода проекта, уже использующего библиотеку i18n, на `gt-react`.

Мы также дадим несколько советов и рекомендаций, которые помогут сделать этот переход максимально плавным.

## Предварительные требования

* Проект, в котором уже используется другая библиотека i18n.
* Базовое понимание библиотеки `gt-react`.

## Почему стоит перейти?

Есть много причин, по которым стоит перенести проект на `gt-react`.

Вот лишь некоторые из них:

* **Больше никаких JSON-файлов:** Вам больше не придется хранить переводы в JSON-файлах.
  Весь ваш контент находится прямо в коде — там, где ему и место.
* **Автоматические переводы:** Создавайте качественные переводы с учетом контекста с помощью нашего CLI-инструмента.
  Вам больше не придется ждать переводы.
* **Экспериментируйте в dev:** Легко экспериментируйте с переводами в процессе разработки благодаря горячей перезагрузке переводов.

## Настройка

<Steps>
  <Step>
    Установите `gt-react` и CLI-инструмент `gt`.

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm i gt-react
        npm i gt
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add gt-react
        yarn add --dev gt
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add gt-react
        bun add --dev gt
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add gt-react
        pnpm add --save-dev gt
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Создайте файл `gt.config.json` в корне проекта, указав в нём свойство `defaultLocale` и массив `locales`.

    ```json title="gt.config.json" copy
    {
      "defaultLocale": "en",
      "locales": ["en", "fr", "es"]
    }
    ```

    Добавьте компонент `<GTProvider>` в корневой компонент приложения и передайте объект `config` в пропсы с помощью spread-оператора.

    ```tsx
    import { GTProvider } from 'gt-react'
    import config from './gt.config.json'

    <GTProvider {...config}>
      <App />
    </GTProvider>
    ```

    Подробные инструкции см. в руководстве [по быстрому старту проекта](/docs/react).
  </Step>

  <Step>
    На этом этапе у вас есть 3 варианта:

    1. Полностью мигрировать весь проект на `gt-react` и удалить старую i18n-библиотеку.
    2. Полностью мигрировать проект, но продолжить использовать словари из старой i18n-библиотеки.
    3. Пока продолжить использовать старую i18n-библиотеку и мигрировать на `gt-react` только часть проекта.

    Подробнее о каждом варианте см. в разделе [стратегии миграции](#strategies).
  </Step>
</Steps>

## Стратегии миграции [#strategies]

### Вариант 1: Полностью перенесите весь проект

Это самый простой вариант, но он потребует больше всего изменений в коде за один раз.

После настройки проекта вам нужно будет найти все вхождения вашей старой библиотеки i18n и заменить их на `gt-react`.

Если ваше приложение использует React-хуки, такие как `useTranslation`, найдите все вхождения `useTranslation` в кодовой базе и замените их на `useGT`.

Затем нужно будет заменить все ключи строк на сами строковые значения.

Например, если ваш старый код выглядит так:

```json title="dictionary.json"
{
  "hello": {
    "description": "Hello, world!"
  }
}
```

```tsx
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}
```

Вам нужно заменить это на:

```tsx
export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// ИЛИ
export default function MyComponent() {
  return <T>Hello, world!</T>
}
```

Проделайте это для всех мест, где используется ваша старая библиотека i18n.


### Вариант 2: Полностью переведите проект, но продолжайте использовать словари из старой библиотеки i18n

Допустим, вы хотите перевести проект на `gt-react`, но при этом сохранить использование словарей из старой библиотеки i18n
и применять встроенные возможности GT только для нового контента.

В этом случае можно сделать примерно то же, что и в варианте 1:

Найдите все места, где используется старая библиотека i18n, например хук `useTranslation`, и замените их на хук `useTranslations`.

Хук `useTranslations` работает почти так же, как `useTranslation`, поэтому использовать его можно аналогичным образом.

<Tabs items={['До', 'После']}>
  <Tab value="До">
    ```tsx
    import { useTranslation } from 'react-i18next'
    export default function MyComponent() {
      const { t } = useTranslation()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>

  <Tab value="После">
    ```tsx
    import { useTranslations } from 'gt-react'
    export default function MyComponent() {
      const t = useTranslations()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>
</Tabs>

Что касается конфигурации, вам нужно создать файл `dictionary.[js|ts|json]` в корне проекта или в каталоге `src`.
Скопируйте содержимое старого файла словаря в новый файл, а затем передайте его в компонент `GTProvider`.

```tsx
import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>
```

Подробнее см. в руководстве [dictionaries](/docs/react/guides/dictionaries).


### Вариант 3: Пока продолжайте использовать старую библиотеку i18n и переносите на `gt-react` только часть проекта

Этот вариант наиболее гибкий и потребует минимальных изменений в коде за один раз.

В этом случае можно сделать примерно то же, что и в варианте 2, но перенести на `gt-react` только часть проекта.

Например, можно и дальше использовать старую библиотеку i18n для одних компонентов, а `gt-react` — только для других и нового контента.

<Callout type="warn">
  Этот вариант не рекомендуется, поскольку вам придется поддерживать в проекте две разные библиотеки i18n, а это может усложнить разработку и привести к ошибкам.
</Callout>

## Советы по переходу

### 1. По возможности используйте хук `useGT` или компонент `<T>`

По возможности рекомендуем использовать хук `useGT` или компонент `<T>`.

Это значительно упростит редактирование контента в будущем и сделает кодовую базу гораздо более читаемой.

### 2. Используйте хук `useTranslations` для существующего контента

Хук `useTranslations` позволяет продолжать работать с уже имеющимися словарями.

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

### 3. Использование ИИ

Если вы используете ИИ, чтобы упростить миграцию проекта, у нас есть файлы `LLMs.txt` и `LLMs-full.txt`, доступные по адресам:

* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)

Эти файлы содержат полный текст документации, поэтому ваш ИИ-инструмент получит доступ ко всей информации, необходимой для миграции проекта.