React Schnellstart

Übersicht

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

Wir behandeln 4 einfache Schritte:

1. Ausführen des Setup-Assistenten

Der Setup-Assistent führt Sie durch den Prozess der Internationalisierung Ihres Projekts.

npx gtx-cli@latest init

Um Ihr Projekt manuell einzurichten, folgen Sie der Anleitung zur manuellen Einrichtung.

Der Setup-Assistent wird:

1. Die benötigten Bibliotheken installieren.
2. Die unterstützten Gebietsschemata Ihres Projekts konfigurieren.
3. Die JSX-Komponenten Ihres Projekts mit der <T>-Komponente umschließen.
4. Einen Produktions-API-Schlüssel und eine Projekt-ID für Ihr Projekt generieren.

Weitere Informationen finden Sie in der Dokumentation zum Setup-Assistenten.

2. Hinzufügen des GTProvider

Fügen Sie die <GTProvider>-Komponente zu Ihrer App hinzu. Übergeben Sie das Konfigurations-JSON-Objekt an das config-Prop.

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

3. Hinzufügen von Umgebungsvariablen

Der Setup-Assistent erstellt für Sie eine .env.local-Datei im Stammverzeichnis Ihres Projekts, die Ihren Produktions-API-Schlüssel und Ihre Projekt-ID enthält.

Um jedoch gt-react im Entwicklungsmodus zu verwenden, müssen Sie stattdessen einen Entwicklungs-API-Schlüssel hinzufügen.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

4. Bereinigen von Zeichenketten

Der Einrichtungsassistent wird alle JSX-Komponenten deines Projekts mit der <T>-Komponente umschließen. Du wirst jedoch feststellen, dass Zeichenketten davon unberührt bleiben.

Wenn du zum Beispiel eine Zeichenkettenkonstante wie diese hast:

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

Der Einrichtungsassistent wird diese Zeichenkette nicht verändern.

Um das zu beheben, kannst du den useGT()-Hook verwenden, um die Zeichenkette zu übersetzen.

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

Probieren wir es aus!

Herzlichen Glückwunsch! 🥳 Deine App ist jetzt mehrsprachig! Schauen wir sie uns in Aktion an.

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.

Manuelle Einrichtung

Wenn Sie die Einrichtung lieber manuell durchführen möchten, folgen Sie den untenstehenden Schritten.

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. Er sollte so weit oben wie möglich in Ihrer App platziert werden, idealerweise im Root.

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

import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    // French and Chinese support 
    <GTProvider locales={['fr', 'zh']}> 
      <MyApp />
    </GTProvider> 
  );
}

Eine vollständige Liste der <GTProvider>-Props und erweiterte Dokumentation finden Sie in der API-Referenz.

3. Die <T> Komponente hinzufügen

Um beliebigen verschachtelten JSX-Inhalt übersetzbar zu machen, umschließen Sie ihn mit der <T> Komponente. Weitere Informationen finden Sie im 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>  
  );
}

Für Zeichenketten können Sie useGT() zur Übersetzung verwenden.

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"