# General Translation React SDKs (gt-react, gt-next, gt-react-native): Développer avec les traductions SPA
URL: https://generaltranslation.com/fr/docs/react/guides/developing-spa-translations.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment prévisualiser les traductions de General Translation lors du développement d’une application React monopage.

Les traductions de développement vous permettent de prévisualiser le 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 commençant par `gtx-dev-`

<Callout type="warn">
  **Limitation de CommonJS :** Le rechargement à chaud en développement nécessite ESM, car le compilateur injecte `await` au niveau supérieur. Cela ne fonctionne pas dans les applications compilées en CommonJS. Les traductions de production continuent toutefois de fonctionner avec le modèle de démarrage CommonJS du [SPA Quickstart](/docs/react/react-spa-quickstart).
</Callout>

## 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. Ajouter le plugin du compilateur

Activez le rechargement à chaud en développement dans la configuration partagée par le CLI et le compilateur :

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json",
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

Ajoutez ensuite le plugin pour votre bundler.

<Callout type="info">
  **Bazel et Rolldown :** le compilateur ne fournit pas d&#39;adaptateurs dédiés à ces systèmes de build. [Stockez les traductions localement](/docs/react/guides/storing-translations) plutôt que de vous appuyer sur le rechargement à chaud assuré par le compilateur.
</Callout>

<Tabs items={['Vite', 'webpack', 'Rollup', 'Rspack', 'esbuild']}>
  <Tab value="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';

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

    `gtCompiler()` charge automatiquement le `gt.config.json` à la racine.
  </Tab>

  <Tab value="webpack">
    Installez `dotenv` comme dépendance de développement pour que webpack puisse lire `.env` et `.env.local`, puis ajoutez le compilateur avant les autres plugins. Utilisez `DefinePlugin` pour n&#39;exposer au code du navigateur que les identifiants de développement :

    ```js title="webpack.config.mjs"
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    import dotenv from 'dotenv';
    import webpack from 'webpack';
    import gtConfig from './gt.config.json' with { type: 'json' };

    dotenv.config({ path: '.env' });
    dotenv.config({ path: '.env.local', override: true });

    export default (_env, argv) => {
      const isProduction = (argv.mode ?? 'production') === 'production';

      return {
        // Conservez vos paramètres webpack existants.
        plugins: [
          gtCompiler({ ...gtConfig }),
          new webpack.DefinePlugin({
            'process.env.GT_PROJECT_ID': JSON.stringify(
              isProduction ? '' : (process.env.GT_PROJECT_ID ?? '')
            ),
            'process.env.GT_DEV_API_KEY': JSON.stringify(
              isProduction ? '' : (process.env.GT_DEV_API_KEY ?? '')
            ),
          }),
        ],
      };
    };
    ```

    Consultez l&#39;[exemple webpack complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/webpack-spa) pour les loaders, les fichiers de traduction locaux et la configuration du serveur de développement.
  </Tab>

  <Tab value="Rollup">
    Enregistrez le compilateur avant vos autres plugins Rollup :

    ```js title="rollup.config.mjs"
    import { rollup as gtCompiler } from '@generaltranslation/compiler';

    export default {
      input: 'src/index.ts',
      plugins: [
        gtCompiler(),
        // Vos autres plugins Rollup
      ],
    };
    ```

    Rollup ne peut pas analyser un import de traduction entièrement dynamique. Listez chaque paramètre régional avec un spécificateur d&#39;import statique :

    ```ts title="src/loadTranslations.ts"
    const translationLoaders = {
      es: () => import('./_gt/es.json'),
      fr: () => import('./_gt/fr.json'),
    };

    export default async function loadTranslations(locale: string) {
      const loader =
        translationLoaders[locale as keyof typeof translationLoaders];
      return loader ? (await loader()).default : {};
    }
    ```

    Rollup seul ne fournit pas l&#39;intégration des identifiants de développement présentée pour Vite et webpack. Régénérez les fichiers de traduction locaux lorsque le contenu source change. Consultez l&#39;[exemple Rollup complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/rollup-spa).
  </Tab>

  <Tab value="Rspack">
    Ajoutez l&#39;adaptateur Rspack à vos plugins :

    ```js title="rspack.config.mjs"
    import { rspack as gtCompiler } from '@generaltranslation/compiler';

    export default {
      plugins: [gtCompiler()],
    };
    ```

    La traduction de développement nécessite également d&#39;exposer `GT_PROJECT_ID` et `GT_DEV_API_KEY` au code du navigateur sans inclure ces valeurs dans les bundles de production.
  </Tab>

  <Tab value="esbuild">
    Ajoutez l&#39;adaptateur esbuild au tableau `plugins` :

    ```js title="build.mjs"
    import { build } from 'esbuild';
    import { esbuild as gtCompiler } from '@generaltranslation/compiler';

    await build({
      entryPoints: ['src/index.ts'],
      bundle: true,
      format: 'esm',
      outdir: 'dist',
      plugins: [gtCompiler()],
    });
    ```

    *Remarque : l&#39;adaptateur esbuild ne prend pas en charge l&#39;injection JSX automatique. Encapsulez explicitement le JSX traduisible ou utilisez un autre adaptateur lorsque `enableAutoJsxInjection` est requis.*
  </Tab>
</Tabs>

Consultez l&#39;[exemple Vite complet de `gt-react`](https://github.com/generaltranslation/gt/tree/main/examples/vite-spa) pour une configuration Vite complète.

### 3. Ajoutez les identifiants de développement

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

```bash
npx gt auth
```

Ajoutez ensuite votre ID de projet et votre clé API de développement à `.env.local`, puis transmettez-les à votre fonction d&#39;initialisation :

<Tabs items={['Vite', 'webpack']}>
  <Tab value="Vite">
    ```bash title=".env.local"
    VITE_GT_PROJECT_ID="your-project-id"
    VITE_GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: import.meta.env.VITE_GT_PROJECT_ID,
      devApiKey: import.meta.env.DEV
        ? import.meta.env.VITE_GT_DEV_API_KEY
        : undefined,
      loadTranslations,
    });
    ```
  </Tab>

  <Tab value="webpack">
    ```bash title=".env.local"
    GT_PROJECT_ID="your-project-id"
    GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: process.env.GT_PROJECT_ID,
      devApiKey: process.env.GT_DEV_API_KEY,
      loadTranslations,
    });
    ```

    La configuration webpack ci-dessus remplace les deux valeurs par des chaînes vides dans les builds de production, afin que les identifiants de développement ne soient pas inclus dans le bundle de production.
  </Tab>
</Tabs>

<Callout type="warn">
  **Développement uniquement :** utilisez une clé commençant par `gtx-dev-`. N&#39;exposez jamais une clé de production commençant par `gtx-api-` dans le code du 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

## Sitemap

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