# General Translation React SDKs (gt-react, gt-next): Vue d’ensemble URL: https://generaltranslation.com/fr/docs/react/overview.mdx --- title: Vue d’ensemble description: Découvrez l’écosystème React de General Translation, le fonctionnement de son modèle de traduction partagé et le quickstart à suivre pour votre framework. --- General Translation internationalise l’écosystème React grâce à une API commune. Les mêmes composants, hooks et la même configuration fonctionnent, que vous créiez une application monopage React, une application Next.js, une application TanStack Start ou une application React Native. Cette page sert d’entrée à la section React. Lisez la suite pour comprendre l’écosystème et choisir votre framework, puis suivez le quickstart correspondant. ## L’écosystème React [#ecosystem] Chaque framework a son propre package, mais ils exposent tous la même API de traduction : * `gt-react` — pour les applications React générées côté serveur et les applications monopages (SPA), comme Vite ou Create React App. Voir le [React Quickstart](/docs/react/react-quickstart) ou le [React SPA Quickstart](/docs/react/react-spa-quickstart). * `gt-next` — pour les applications Next.js avec App Router et Pages Router. Voir le [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) ou le [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * `gt-tanstack-start` — pour les applications TanStack Start. Voir le [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * `gt-react-native` — pour les applications React Native, y compris Expo et le bare React Native CLI. Voir le [React Native Quickstart](/docs/react/react-native-quickstart). *Remarque :* `gt-tanstack-start` *et* `gt-react-native` *sont expérimentaux et ne sont pas encore recommandés en production.* ## Modèle de traduction partagé [#shared-model] Comme tous les packages reposent sur le même noyau, vous apprenez le modèle une seule fois et le réutilisez partout. Les éléments sont les suivants : * **Le composant** [``](/docs/react/reference/components/t) **.** Encapsulez n’importe quel JSX dans `` pour le traduire sur place, y compris les éléments imbriqués et la mise en forme. `` traduit son contenu comme une unité unique. * **Le hook** [`useGT`](/docs/react/reference/hooks/use-gt) **.** Traduisez les chaînes autonomes — espaces réservés, valeurs `aria-label`, texte alternatif — avec la fonction qu’il renvoie. Appelez-le ainsi : `const gt = useGT();`, puis `gt('Hello, world!')`. Dans les composants async App Router, utilisez [`getGT`](/docs/react/nextjs/reference/functions/get-gt) depuis `gt-next/server`. * **Le composant** `GTProvider` **.** Encapsulez votre application afin que les composants puissent accéder aux traductions et au paramètre régional actif. La manière de lui fournir les traductions varie légèrement selon le framework, c’est pourquoi chacun a son propre quickstart. * `gt.config.json`**.** Un unique fichier de configuration à la racine de votre projet qui déclare votre `defaultLocale`, vos `locales` cibles, ainsi que l’emplacement où les fichiers de traduction sont enregistrés. * **La CLI** `gt` **.** Le package `gt` génère et télécharge les traductions. Exécutez `npx gt translate` pour traduire votre projet via l’API de General Translation. Les composants variables ([``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime)), les composants [``](/docs/react/reference/components/plural) et [``](/docs/react/reference/components/branch), ainsi que les hooks de paramètre régional sont également communs à tous les frameworks. ## Choisissez votre framework [#frameworks] Chaque configuration utilise les mêmes composants de traduction et la même CLI, mais l’initialisation et la livraison des traductions diffèrent. Commencez par le quickstart correspondant à votre framework : * **Créer une application React rendue côté serveur :** initialisez `gt-react`, chargez les traductions sur le serveur et hydratez `GTProvider`. Consultez le [React Quickstart](/docs/react/react-quickstart). * **Créer une SPA React (Vite, Create React App) :** initialisez `gt-react` dans le navigateur avant l’affichage. Consultez le [React SPA Quickstart](/docs/react/react-spa-quickstart). * **Créer une application Next.js App Router :** ajoutez le plugin `withGTConfig` et utilisez `` dans les composants serveur et client. Consultez le [Next.js App Router Quickstart](/docs/react/nextjs-quickstart). * **Créer une application Next.js Pages Router :** chargez le paramètre régional et les traductions via les props de page. Consultez le [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * **Créer une application TanStack Start :** initialisez General Translation dans la route racine et hydratez `GTProvider` à partir d’un loader. Consultez le [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * **Créer une application React Native :** initialisez-le dans votre point d’entrée et ajoutez le plugin Babel pour les polyfills. Consultez le [React Native Quickstart](/docs/react/react-native-quickstart). Une fois la configuration terminée, les [Guide](/docs/react/guides/configuring) couvrent les workflows communs — traduction du JSX et des strings, formatage des variables, pluriels, dictionnaires et gestion des locales — et la [Reference](/docs/react/reference/config) documente chaque composant, hook, fonction et option de configuration. Les deux s’appliquent à tous les frameworks, avec les différences propres à chacun présentées dans des onglets.