# General Translation React SDKs (gt-react, gt-next): React SPA Quickstart
URL: https://generaltranslation.com/fr/docs/react/react-spa-quickstart.mdx
---
title: React SPA Quickstart
description: Ajoutez plusieurs langues à une application React monopage avec General Translation en moins de 10 minutes.
related:
links:
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations
---
# React SPA Quickstart
À la fin de ce guide, votre application React monopage affichera du contenu en plusieurs langues, avec un sélecteur de langue que vos utilisateurs pourront utiliser.
Dans une application monopage, `gt-react` s’exécute entièrement dans le navigateur — vous l’initialisez une seule fois au démarrage avec `initializeGTSPA()`, et vous n’avez pas besoin d’un composant provider.
**Prérequis :**
* Une application React avec rendu côté client (Vite, webpack ou similaire)
* Node.js 18+
**Astuce :** Exécutez `npx gt@latest` pour tout configurer avec l’[assistant de configuration](/docs/cli/reference/commands/init). Ce guide présente la configuration manuelle.
**Remarque :** Si votre application effectue un rendu côté serveur, suivez plutôt le [React Quickstart](/docs/react/react-quickstart).
## Démarrage rapide [#quickstart]
### 1. Installez les paquets
`gt-react` est la bibliothèque qui gère les traductions dans votre application. `gt` est l’outil CLI qui prépare vos traductions.
```bash
npm i gt-react
npm i -D gt
```
```bash
yarn add gt-react
yarn add --dev gt
```
```bash
bun add gt-react
bun add --dev gt
```
```bash
pnpm add gt-react
pnpm add --save-dev gt
```
### 2. Créer un fichier de configuration de traduction
Créez un fichier **`gt.config.json`** à la racine de votre projet. Ce fichier indique à la bibliothèque les langues que vous prenez en charge :
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — la langue dans laquelle votre application est écrite (votre langue source).
* **`locales`** — les langues vers lesquelles vous souhaitez traduire. Choisissez-les dans la [liste des locales prises en charge](/docs/platform/dashboard/reference/supported-locales).
* **`files`** — indique au CLI où enregistrer les fichiers de traduction. Le chemin `output` doit correspondre au chemin d’import de votre fonction `loadTranslations` (étape 3).
**Emplacement du fichier :** Les bundlers comme Vite importent les fichiers de traduction sous forme de modules. Ils doivent donc se trouver dans `src/`.
### 3. Créer un loader de traduction
Dans une SPA, `gt-react` a besoin d’une fonction pour charger les fichiers de traduction dans le navigateur à l’exécution. Créez un fichier `loadTranslations` :
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Cette fonction charge les fichiers de traduction JSON à partir de votre répertoire `src/_gt/`. Le CLI génère ces fichiers lorsque vous exécutez `npx gt translate`.
### 4. Initialiser la bibliothèque
Appelez **`initializeGTSPA`** une seule fois au démarrage, avant le rendu de votre application. Cette fonction prend votre configuration et votre loader de traduction, détermine le paramètre régional de l'utilisateur et charge les traductions correspondantes.
L'approche la plus robuste consiste à utiliser un petit module d'entrée qui initialise d'abord GT, puis charge le reste de l'application. Cela vous permet de traduire le contenu au niveau du module.
```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
await initializeGTSPA({
defaultLocale: gtConfig.defaultLocale,
locales: gtConfig.locales,
loadTranslations,
});
await import('./main'); // rendre l'application uniquement une fois que GT est prêt
```
```tsx title="src/main.tsx"
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(
);
```
Mettez ensuite à jour la balise de script de type module dans votre `index.html` pour qu’elle pointe vers la nouvelle entrée : remplacez son `src` de `/src/main.tsx` par `/src/index.ts`.
```html title="index.html"
```
`initializeGTSPA` s’exécute une seule fois au démarrage — la configuration est immuable pendant toute la durée de vie de l’application. Une fois l’initialisation terminée, les traductions peuvent être récupérées dans n’importe quel module. **Vous n'avez pas besoin d'entourer votre application d’un provider.**
**Astuce :** Suivez [Développer avec les traductions SPA](/docs/react/guides/developing-spa-translations) pour ajouter le compiler et les identifiants de développement.
### 5. Marquer le contenu à traduire
Maintenant, entourez tout texte que vous souhaitez traduire avec le composant **``**. `` signifie "traduire" :
```tsx title="src/components/Welcome.tsx"
import { T } from 'gt-react';
export default function Welcome() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Vous pouvez entourer autant ou aussi peu de JSX que vous le souhaitez avec ``. Tout ce qu’il contient — texte, éléments imbriqués, même la mise en forme — est traduit comme un tout.
Pour les chaînes en dehors des composants React, utilisez **`t()`**. Cela fonctionne au niveau du module, car `initializeGTSPA()` charge les traductions avant le reste de votre application :
```ts title="src/navigation.ts"
import { t } from 'gt-react';
export const navigation = [
{ label: t('Home'), href: '/' },
{ label: t('About'), href: '/about' },
];
```
### 6. Ajoutez un sélecteur de langue
Ajoutez un **``** pour permettre aux utilisateurs de changer de langue :
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (