React Schnellstart

Überblick

Diese Anleitung beschreibt, wie man ein bestehendes React-Projekt internationalisiert.

Wir werden 4 einfache Schritte behandeln:

Der gesamte Prozess sollte weniger als 5 Minuten dauern.

Einrichtung

1. Bibliotheken installieren

Installieren Sie die Bibliotheken gt-react und gtx-cli.

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

2. Sprachen auswählen

<GTProvider> wird verwendet, um das Verhalten von gt-react zu konfigurieren. Es sollte so weit oben wie möglich in Ihrer App platziert werden, idealerweise an der Wurzel.

Übergeben Sie einfach eine Liste von Sprachcodes, um sie zu Ihrer App hinzuzufügen.

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // Unterstützung für Französisch und Chinesisch 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

Für eine vollständige Liste der <GTProvider>-Props und erweiterte Dokumentation siehe die API-Referenz.

3. Fügen Sie die <T>-Komponente hinzu

Umwickeln Sie jeden verschachtelten JSX-Inhalt in der <T>-Komponente, um ihn übersetzbar zu machen. Für weitere Informationen lesen Sie den Leitfaden zur Verwendung von <T>-Komponenten.

import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Dies wird übersetzt.
      </p>
    </T>  
  );
}

Verwenden Sie die <Var>-Komponente, um JSX-Inhalte zu kennzeichnen, die nicht übersetzt werden sollen.

import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        Dies wird übersetzt. <Var>Dies nicht.</Var>
      </p>
    </T>  
  );
}

npx gtx-cli setup

Für Zeichenfolgen können Sie useGT() zur Übersetzung verwenden. Für weitere Informationen lesen Sie diesen Leitfaden.

import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("Dies wird übersetzt.")}
    </p>
  );
}

4. Fügen Sie Ihre Umgebungsvariablen hinzu

Fügen Sie Ihren API-Schlüssel und Ihre Projekt-ID zu Ihren Umgebungsvariablen hinzu.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Probieren wir es aus!

Herzlichen Glückwunsch! 🥳 Deine App ist jetzt mehrsprachig! Schauen wir uns an, wie sie funktioniert.

Sieh dir deine App in einer anderen Sprache an

npm run dev 

Fehlerbehebung

Versand in die Produktion

Folgen Sie unserem Leitfaden zum Versand in die Produktion.

Nächste Schritte

• Siehe unsere React API-Referenz für detaillierte Informationen über die <T> Komponente und andere verfügbare Komponenten.
• Erstellen Sie eine Liste genehmigter Sprachen für Ihre App mit dem React-Plugin.