# gt-react: General Translation React SDK: Démarrage rapide SPA
URL: https://generaltranslation.com/fr/docs/react/tutorials/quickstart-spa.mdx
---
title: Démarrage rapide SPA
description: Ajoutez plusieurs langues à votre application React monopage en moins de 10 minutes
---
À 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 rendue côté client (Vite, webpack ou équivalent)
* Node.js 18+
**Vous souhaitez une configuration automatique ?** Exécutez `npx gt@latest` pour tout configurer avec l’[assistant de configuration](/docs/cli/init). Ce guide couvre la configuration manuelle.
**Application rendue côté serveur ?** Si votre application est rendue sur le serveur, suivez plutôt le [démarrage rapide React](/docs/react).
***
## Étape 1 : Installez les packages
`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
```
***
## Étape 2 : Créez un fichier de configuration des traductions
Créez un fichier **`gt.config.json`** à la racine de votre projet. Cela indique à la bibliothèque quelles langues 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 dans lesquelles vous souhaitez traduire. Choisissez-les dans la [liste des paramètres régionaux pris en charge](/docs/platform/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 des fichiers :** Les bundlers comme Vite importent les fichiers de traduction sous forme de modules ; ils doivent donc se trouver dans `src/`.
***
## Étape 3 : Créer un chargeur de traductions
Dans une SPA, `gt-react` a besoin d’une fonction capable de 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`.
***
## Étape 4 : Initialiser la bibliothèque
Appelez **`initializeGTSPA`** une seule fois au démarrage, avant le rendu de votre application. Cette fonction reçoit votre configuration et votre chargeur de traductions, détermine le paramètre régional de l'utilisateur et charge les traductions correspondantes.
L'approche la plus fiable 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 le nouveau point d’entrée : remplacez son `src`, de `/src/main.tsx` à `/src/index.ts`.
```html title="index.html"
```
`initializeGTSPA` ne s’exécute qu’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ésolues dans n’importe quel module. **Vous n’avez pas besoin d’envelopper votre application dans un provider.**
**Vous voulez des traductions en direct pendant le développement ?** Suivez le [guide de traduction pendant le développement d’une SPA](/docs/react/tutorials/spa-development-translations) pour ajouter le compiler et les identifiants de développement.
***
## Étape 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 englober autant ou aussi peu de JSX que vous le souhaitez dans ``. Tout ce qu’il contient — texte, éléments imbriqués, même la mise en forme — est traduit comme une seule unité.
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' },
];
```
***
## Étape 6 : Ajouter 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 (