# General Translation Knowledge Base: Comment traduire une application React ? URL: https://generaltranslation.com/fr/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduire une application React consiste à internationaliser ses composants pour qu’ils s’affichent dans la langue de l’utilisateur, puis à traduire chaque chaîne de caractères dans chacune des langues prises en charge. gt-react de General Translation traduit le JSX sur place dans le composant ``, et npx gt translate génère un fichier par langue. Category: Internationalisation Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Traduire une application React se fait en deux temps : l’internationalisation (i18n), qui permet aux composants de s’afficher dans la langue de l’utilisateur, puis la traduction de chaque chaîne de caractères dans chacune des langues prises en charge. La difficulté vient du fait que le texte se trouve dans le JSX, mêlé au balisage, aux variables et aux formes plurielles, dont les règles varient d’une langue à l’autre (l’anglais en compte 2, l’arabe 6). L’approche habituelle consiste à placer chaque chaîne derrière une clé, comme `t('home.welcome')`, avec un fichier JSON par langue à garder synchronisé. Traduit sans l’IU qui l’entoure, un bouton « Save » peut revenir en allemand sous la forme *sparen* (économiser de l’argent) au lieu de *speichern* (enregistrer un fichier). ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 s) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## Méthodes pour traduire une application React | Approche | Ses points forts | Ce qui reste à votre charge | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Une bibliothèque d’i18n basée sur des clés ([`i18next`](/kb/general-translation-vs-i18next) avec `react-i18next`, ou [`react-intl`](/kb/general-translation-vs-react-intl)) | Moteur d’exécution éprouvé pour afficher les traductions, sélectionner les formes du pluriel et formater les valeurs | Remplacer les chaînes par des clés, synchroniser un fichier JSON par langue et produire chaque traduction | | [Lingui](/kb/general-translation-vs-lingui) | Garde le texte intégré grâce à sa macro ``, et `lingui extract` génère un catalogue par langue | Traduire chaque catalogue, à la main ou via un service connecté, et relancer l’extraction et la compilation à chaque modification du texte | | Un système de gestion de la traduction ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | Un éditeur web, synchronisé avec votre dépôt, où les traducteurs travaillent avec des captures d’écran, un glossaire et une mémoire de traduction | La bibliothèque d’i18n et les fichiers de clés dans votre code, la configuration initiale de la synchronisation, et l’attente des traducteurs avant chaque livraison | | General Translation (`gt-react` et la CLI `gt`) | [``](/docs/react/reference/components/t) traduit le JSX sur place sans clés, et [`npx gt translate`](/docs/cli/reference/commands/translate) génère un fichier par langue en s’appuyant sur la structure JSX environnante comme contexte | Encapsuler le texte dans [``](/docs/react/reference/components/t), une configuration initiale unique (langues dans `gt.config.json`, un loader, un fichier d’entrée, une connexion et un identifiant de projet), et relancer [`npx gt translate`](/docs/cli/reference/commands/translate) (en local ou en CI) lorsque le contenu change | Utilisez une bibliothèque basée sur des clés seule, avec des fichiers JSON rédigés à la main, lorsque l’application contient peu de chaînes et qu’elles changent rarement. Choisissez Lingui si vous souhaitez garder le texte intégré et disposez de traducteurs pour remplir ses catalogues, et un système de gestion de la traduction si une équipe de localisation traduit chaque livraison à la main. Optez pour General Translation lorsque l’application évolue sans cesse et que chaque livraison doit sortir dans toutes les langues. ## Traduire une application React avec General Translation La bibliothèque open source `gt-react` et la CLI `gt` de General Translation permettent de traduire une application monopage (SPA) React, comme un projet Vite ou webpack. L’assistant de configuration initiale `npx gt@latest` peut configurer pour vous le point d’entrée Vite et le chargement des traductions (étape expérimentale). Pour tout configurer vous-même : 1. Installez `gt-react` et la CLI `gt`. 2. Indiquez vos langues dans `gt.config.json`. 3. Ajoutez une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations), puis appelez [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) dans un petit fichier d’entrée afin que les traductions soient chargées avant l’affichage de l’application. 4. Encapsulez votre texte dans le composant [``](/docs/react/reference/components/t) : ```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.
); } ``` 5. Connectez-vous avec [`npx gt login`](/docs/cli/reference/commands/login) et définissez votre identifiant de projet. 6. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) pour générer un fichier de traduction par langue. La prop `context` de [``](/docs/react/reference/components/t) permet de lever l’ambiguïté d’un mot comme « Save », tandis qu’un glossaire et des instructions personnalisées définis dans le tableau de bord assurent la cohérence de la terminologie et du ton. Les applications [React server-rendered](/docs/react/react-quickstart), [React Router en mode framework](/docs/react/react-router-quickstart) et [Next.js](/docs/react/nextjs-quickstart) (avec `gt-next`) disposent de leurs propres guides de démarrage rapide ; pour une SPA, le [Démarrage rapide pour une SPA React](/docs/react/react-spa-quickstart) détaille toutes les étapes. ## Related questions - [Comment ajouter l’i18n à une application Next.js App Router ?](https://generaltranslation.com/fr/kb/add-i18n-to-nextjs.mdx): Commencez par gt init pour configurer General Translation dans un projet App Router pris en charge, puis balisez le contenu source, générez les traductions et vérifiez le changement de langue. gt-next conserve les textes dans le JSX avec leur contexte de traduction ; la CLI, l’éditeur du tableau de bord et Locadex prennent en charge la génération, la relecture et les mises à jour continues. Ce guide présente également la configuration initiale explicite avec des fichiers locaux. - [Comment traduire une application React Native ?](https://generaltranslation.com/fr/kb/translate-react-native-app.mdx): Marquez le texte dans vos composants, générez un fichier de traduction pour chaque langue, ajoutez des polyfills Intl et chargez le fichier correspondant à la langue de l’appareil. Avec gt-react-native, la bibliothèque expérimentale de General Translation, vous encapsulez le texte dans ``, un plugin Babel ajoute les polyfills et npx gt translate génère les fichiers. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Les bibliothèques gt-react et gt-next de General Translation permettent d’internationaliser React et Next.js sans clés de traduction ni fichier JSON par langue à maintenir. Le texte reste intégré au JSX, dans le composant ``, et la commande gt translate génère les traductions de chaque langue lors de la compilation, en s’appuyant sur le contexte de votre code. Locadex peut les tenir à jour via des pull requests. - [Comment traduire des chaînes en dehors du JSX ?](https://generaltranslation.com/fr/kb/translate-strings-outside-jsx.mdx): Faites passer chaque chaîne qui n’est pas un enfant JSX, comme un espace réservé ou une constante définie au niveau du module, par une fonction de traduction à l’endroit où elle est affichée. Le hook useGT de General Translation renvoie cette fonction, et msg, combiné à useMessages, traduit les constantes définies en dehors d’un composant. - [Comment gérer les formes plurielles dans React ?](https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx): Pour gérer les formes plurielles dans React, fournissez à chaque langue une phrase par forme du pluriel et sélectionnez-la selon les règles de pluriel de cette langue, car l’anglais compte 2 formes, le russe 4 et l’arabe 6. Le composant `` de General Translation, disponible dans gt-react et gt-next, prend vos formes source, et General Translation génère les formes requises par chaque langue cible. ## Previous and next questions - Previous question: [Comment traduire une application Node.js ?](https://generaltranslation.com/fr/kb/translate-node-app.mdx) - Next question: [Comment traduire une application React Native ?](https://generaltranslation.com/fr/kb/translate-react-native-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.