# gt-react: General Translation React SDK: Démarrage rapide React
URL: https://generaltranslation.com/fr/docs/react.mdx
---
title: Démarrage rapide React
description: Ajoutez plusieurs langues à votre application React en moins de 10 minutes
---
À la fin de ce guide, votre application React affichera du contenu en plusieurs langues et proposera un sélecteur de langue que vos utilisateurs pourront utiliser.
**Prérequis :**
* Une application React (Vite, Create React App ou équivalent)
* Node.js 18+
**Vous voulez une configuration automatique ?** Exécutez `npx gt@latest` pour tout configurer avec l’[assistant de configuration](/docs/cli/init). Ce guide explique la configuration manuelle.
***
## É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 les traductions pour la production.
```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 de traduction
Créez un fichier **`gt.config.json`** à la racine de votre projet. Cela 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": "public/_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 configurations régionales compatibles](/docs/platform/supported-locales).
* **`files`** — indique au CLI où enregistrer les fichiers de traduction. Le chemin `output` doit correspondre au chemin d’import dans votre fonction `loadTranslations` (étape 3).
**Vous utilisez Vite ?** Définissez le chemin de sortie sur `"src/_gt/[locale].json"` au lieu de `"public/_gt/[locale].json"`. Vite importe les fichiers de traduction sous forme de modules, ils doivent donc se trouver dans `src/` plutôt que dans `public/`.
***
## Étape 3 : Créez un chargeur de traductions
`gt-react` s’exécute entièrement côté client. Il a donc besoin d’une fonction pour charger les fichiers de traduction à 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(`../public/_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Cette fonction charge les fichiers de traduction JSON depuis le répertoire `public/_gt/` de votre application. Le CLI génère ces fichiers lorsque vous exécutez `npx gt translate`.
Comme les fichiers de traduction de Vite se trouvent dans `src/_gt/` (voir l’étape 2), mettez à jour le chemin d’importation :
```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 {};
}
}
```
La configuration webpack de CRA bloque les `import()` dynamiques en dehors de `src/`. Utilisez donc `fetch()` à la place :
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const response = await fetch(`${process.env.PUBLIC_URL}/_gt/${locale}.json`);
if (!response.ok) throw new Error('Not found');
return await response.json();
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
***
## Étape 4 : Ajoutez GTProvider à votre application
Le composant **`GTProvider`** donne à toute votre application accès aux traductions. Enveloppez votre application à la racine :
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Le contenu de votre application */}
);
}
```
`GTProvider` prend votre configuration et votre chargeur de traductions comme props. Il gère l’état du paramètre régional et met les traductions à la disposition de tous les composants enfants.
CRA limite les imports aux fichiers situés dans `src/`, donc `import gtConfig from '../gt.config.json'` échouera. Copiez soit `gt.config.json` dans `src/`, soit intégrez directement la configuration :
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Le contenu de votre application */}
);
}
```
***
## Étape 5 : Marquez le contenu à traduire
Maintenant, entourez tout texte que vous voulez 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 inclure 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 un tout.
***
## É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 (