# gt-react: General Translation React SDK: Переводы для разработки SPA
URL: https://generaltranslation.com/ru/docs/react/tutorials/spa-development-translations.mdx
---
title: Переводы для разработки SPA
description: Смотрите, как переводы обновляются в реальном времени при разработке вашего одностраничного React-приложения
---

Переводы для разработки позволяют просматривать переведённый контент по мере редактирования SPA. Для этого требуется GT компилятор и API-ключ для разработки.

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

* Одностраничное React-приложение, настроенное с помощью [Быстрый старт SPA](/docs/react/tutorials/quickstart-spa)
* API-ключ для разработки, начинающийся с `gtx-dev-`

## Шаг 1: Установите компилятор

Установите `@generaltranslation/compiler` как зависимость для разработки:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

## Шаг 2: Добавьте плагин компилятора

Добавьте плагин для вашего сборщика. Для Vite:

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json'; // [!code highlight]

export default defineConfig({
  plugins: [gtCompiler({ ...gtConfig }), react()], // [!code highlight]
});
```

<Accordions>
  <Accordion title="Не используете Vite?">
    `@generaltranslation/compiler` также экспортирует плагины для `webpack`, `rollup` и `esbuild`. Импортируйте плагин, соответствующий вашему сборщику.

    ```ts
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    ```
  </Accordion>
</Accordions>

## Шаг 3: Добавьте учетные данные для разработки

Получите ключ API для разработки на [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) или с помощью команды:

```bash
npx gt auth
```

Затем добавьте ID проекта и API-ключ для разработки в `.env.local`:

```bash title=".env.local"
VITE_GT_PROJECT_ID="your-project-id"
VITE_GT_DEV_API_KEY="your-dev-api-key"
```

`gt-react` автоматически считывает эти значения при инициализации.

<Callout type="warn">
  **Только для разработки:** Используйте ключ, начинающийся с `gtx-dev-`. Никогда не используйте в браузерном коде продакшн-ключ, начинающийся с `gtx-api-`.
</Callout>

## Шаг 4: Начните разработку

Запустите сервер разработки и переключитесь на локаль, отличную от локали по умолчанию. Когда вы редактируете переводимый контент, компилятор регистрирует изменение, а `gt-react` запрашивает обновлённый перевод для разработки.

## Следующие шаги

* [Быстрый старт SPA](/docs/react/tutorials/quickstart-spa) - Ознакомьтесь с полной настройкой SPA
* [Компилятор](/docs/react/concepts/compiler) - Узнайте о валидации компилятора и автоматической инъекции JSX
* [Production и Development](/docs/react/concepts/environments) - Разберитесь, как меняется поведение перевода в зависимости от среды