Démarrage rapide avec React

Aperçu

Ce guide décrit comment internationaliser un projet React existant.

Nous couvrirons 4 étapes simples :

1. Exécuter l'assistant de configuration

L'assistant de configuration vous guidera à travers le processus d'internationalisation de votre projet.

npx gtx-cli@latest init

Pour configurer manuellement votre projet, suivez le guide de configuration manuelle.

L'assistant de configuration va :

1. Installer les bibliothèques requises.
2. Configurer les locales prises en charge par votre projet.
3. Envelopper les composants JSX de votre projet avec le composant <T>.
4. Générer une clé API de production et un ID de projet pour votre projet.

Consultez la documentation de l'assistant de configuration pour plus d'informations.

2. Ajouter le GTProvider

Ajoutez le composant <GTProvider> à votre application. Distribuez l'objet JSON de configuration dans la prop config.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
import config from "./gt.config.json";
 
export default function App() {
  return (
    <GTProvider {...config}> 
      <MyApp />
    </GTProvider> 
  );
}

3. Ajouter les variables d'environnement

L'assistant de configuration créera un fichier .env.local pour vous à la racine de votre projet contenant votre clé API de production et l'ID de projet.

Cependant, pour utiliser gt-react en mode développement, vous devrez ajouter une clé API de développement au lieu d'une clé de production.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

4. Nettoyage des chaînes de caractères

L'assistant de configuration enveloppera tous les composants JSX de votre projet avec le composant <T>. Cependant, vous remarquerez peut-être que les chaînes de caractères ne sont pas affectées.

Par exemple, si vous avez une constante de chaîne comme celle-ci :

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

L'assistant de configuration ne touchera pas à cette chaîne.

Pour résoudre ce problème, vous pouvez utiliser le hook useGT() pour traduire la chaîne.

import { useGT } from "gt-react";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

Essayons-le !

Félicitations ! 🥳 Votre application est maintenant multilingue ! Voyons-la en action.

Voir votre application dans une autre langue

npm run dev 

Dépannage

Déploiement en Production

Suivez notre guide sur le déploiement en production.

Prochaines étapes

• Consultez notre référence API React pour des informations détaillées sur le composant <T> et les autres composants disponibles.

Configuration Manuelle

Si vous préférez effectuer la configuration manuellement, suivez les étapes ci-dessous.

1. Installer les bibliothèques

Installez les bibliothèques gt-react et gtx-cli.

npm i gt-react
npm i gtx-cli --save-dev

2. Sélectionner les langues

<GTProvider> est utilisé pour configurer le comportement de gt-react. Il doit être placé aussi haut que possible dans votre application, idéalement à la racine.

Il suffit de passer une liste de codes de locale pour les ajouter à votre application.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // Support pour le français et le chinois 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

Pour une liste complète des props de <GTProvider> et une documentation détaillée, consultez la référence API.

3. Ajouter le composant <T>

Enveloppez tout contenu JSX imbriqué dans le composant <T> pour le rendre traduisible. Pour plus d'informations, consultez le guide d'utilisation des composants <T>.

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Ceci sera traduit.
      </p>
    </T>  
  );
}

Utilisez le composant <Var> pour désigner le contenu JSX qui ne doit pas être traduit.

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Ceci sera traduit. <Var>Ceci ne le sera pas.</Var>
      </p>
    </T>  
  );
}

Pour les chaînes de caractères, vous pouvez utiliser useGT() pour la traduction.

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("Ceci sera traduit.")}
    </p>
  );
}

4. Ajouter vos variables d'environnement

Ajoutez votre clé API et votre ID de projet à vos variables d'environnement.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"