# gt-react: General Translation React SDK: Traductions de développement pour les SPA
URL: https://generaltranslation.com/fr/docs/react/tutorials/spa-development-translations.mdx
---
title: Traductions de développement pour les SPA
description: Voyez les traductions se mettre à jour en temps réel pendant le développement de votre application React monopage
---

Les traductions de développement vous permettent de prévisualiser le contenu traduit au fur et à mesure que vous modifiez votre SPA. Elles nécessitent le GT compilateur et une clé API de développement.

**Prérequis :**

* Une application React monopage configurée avec le [SPA Quickstart](/docs/react/tutorials/quickstart-spa)
* Une clé API de développement qui commence par `gtx-dev-`

## Étape 1 : Installer le compilateur

Installez `@generaltranslation/compiler` en tant que dépendance de développement :

<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>

## Étape 2 : Ajouter le plugin de compilateur

Ajoutez le plugin pour votre bundler. Pour 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="Vous n’utilisez pas Vite ?">
    `@generaltranslation/compiler` exporte également des plugins `webpack`, `rollup` et `esbuild`. Importez celui qui correspond à votre bundler.

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

## Étape 3 : Ajoutez des identifiants de développement

Obtenez une clé API de développement sur [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) ou en exécutant :

```bash
npx gt auth
```

Ajoutez ensuite votre project ID et votre API Key de développement dans `.env.local` :

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

`gt-react` lit automatiquement ces valeurs lors de l’initialisation.

<Callout type="warn">
  **Développement uniquement :** utilisez une clé commençant par `gtx-dev-`. N’exposez jamais dans le code du navigateur une clé de production commençant par `gtx-api-`.
</Callout>

## Étape 4 : Commencez à développer

Démarrez votre serveur de développement et basculez vers un paramètre régional autre que le paramètre régional par défaut. Lorsque vous modifiez du contenu traduisible, le compilateur enregistre la modification et `gt-react` demande une traduction de développement mise à jour.

## Prochaines étapes

* [SPA Quickstart](/docs/react/tutorials/quickstart-spa) - Consultez la configuration complète d’une SPA
* [Compilateur](/docs/react/concepts/compiler) - Découvrez la validation du compilateur et l’injection automatique de JSX
* [Production vs développement](/docs/react/concepts/environments) - Comprenez comment le comportement de traduction varie selon l’environnement