# General Translation React SDKs (gt-react, gt-next, gt-react-native): Vue d’ensemble URL: https://generaltranslation.com/fr/docs/react/overview.mdx --- title: Vue d’ensemble description: Découvrez quelle bibliothèque React et quel quickstart conviennent à votre framework. --- Les bibliothèques d’internationalisation React de General Translation reposent sur des composants, hooks et une configuration communs à SPA React, Next.js App Router, Next.js Pages Router, TanStack Start et 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 famille de frameworks a son propre package : * `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. Consultez leurs quickstarts pour connaître les limitations actuelles avant de choisir l’un ou l’autre. ## Modèle de traduction partagé [#shared-model] Comme chaque bibliothèque d’i18n React partage les mêmes composants de base et hooks, il existe un modèle de traduction unique à maîtriser. Les éléments importants sont les suivants : * [``](/docs/react/reference/components/t) **composant.** Encapsulez n’importe quel JSX dans [``](/docs/react/reference/components/t) pour le traduire sur place, y compris les éléments imbriqués et le formatage. [``](/docs/react/reference/components/t) traduit son contenu comme une unité unique. * [`useGT`](/docs/react/reference/hooks/use-gt) **hook.** 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`. * [`GTProvider`](/docs/react/reference/components/gt-provider) **composant.** 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` **CLI.** Le package `gt` génère et télécharge les traductions. Son fichier [`gt.config.json`](/docs/cli/reference/config) déclare votre `defaultLocale`, vos `locales` cibles et les chemins de sortie des traductions. Exécutez [`npx gt translate`](/docs/cli/reference/commands/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) et [``](/docs/react/reference/components/datetime)) sont également communs, tout comme [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/branch), [``](/docs/react/reference/components/derive) et les hooks de paramètre régional tels que [`useLocale`](/docs/react/reference/hooks/use-locale). ## 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 générée côté serveur :** initialisez `gt-react`, chargez les traductions sur le serveur et hydratez [`GTProvider`](/docs/react/reference/components/gt-provider). 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 [``](/docs/react/reference/components/t) 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 `src/router.tsx` et hydratez [`GTProvider`](/docs/react/reference/components/gt-provider) à partir du loader de la route racine. 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.