# General Translation React SDKs (gt-react, gt-next): Développer avec les traductions SPA
URL: https://generaltranslation.com/fr/docs/react/guides/developing-spa-translations.mdx
---

title: Développer avec les traductions SPA
description: Comment prévisualiser les traductions de General Translation lors du développement d’une application React monopage.
related:
  links:
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/managing-locales

---

# Développer avec les traductions SPA

Les traductions de développement vous permettent d’avoir un aperçu du contenu traduit pendant que vous modifiez votre SPA. Elles nécessitent le compilateur GT et une clé API de développement.

**Prérequis :**

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

## Configuration [#setup]

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

### 2. Ajoutez le plugin du compilateur

Ajoutez le plugin à 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 aussi des plugins `webpack`, `rollup` et `esbuild`. Importez le plugin correspondant à votre bundler.

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

### 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 ID de projet et votre clé API de développement à `.env.local` :

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

Puis, passez-les à votre fonction d&#39;initialisation :

```ts
await initializeGTSPA({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});
```

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

### 4. Commencez à développer

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

- /docs/react/guides/storing-translations
- /docs/react/guides/configuring
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales