Démarrage rapide de React

Aperçu

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

Nous couvrirons 4 étapes simples :

Ce processus entier devrait prendre moins de 5 minutes.

Configuration

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 du français et du chinois 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

Pour une liste complète des props de <GTProvider> et une documentation étendue, 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 sur l'utilisation des composants <T>.

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Ceci est 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 est traduit. <Var>Ceci ne l'est pas.</Var>
      </p>
    </T>  
  );
}

npx gtx-cli setup

Pour les chaînes de caractères, vous pouvez utiliser useGT() pour la traduction. Pour plus d'informations, consultez ce guide.

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("Ceci est 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"

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

Expédition en Production

Suivez notre guide sur l'expédition en production.

Prochaines étapes

• Consultez notre référence API React pour des informations détaillées sur le composant <T> et d'autres composants disponibles.
• Créez une liste de langues approuvées pour votre application avec le plugin React.