Bringen Sie Ihre React-App in wenigen Minuten zum Übersetzen.

Voraussetzungen: React, grundlegende JavaScript-Kenntnisse

Installation

Installieren Sie die Pakete gt-react und gtx-cli:

npm i gt-react
npm i gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

Konfiguration

GTProvider

Die Komponente GTProvider stellt Ihren React-Komponenten den Übersetzungskontext bereit. Sie verwaltet den locale-Status, die Übersetzungen und ermöglicht die Hooks useGT und useTranslations.

Fügen Sie den GTProvider zu Ihrer Root-App-Komponente hinzu:

import { GTProvider } from 'gt-react';

export default function App() {
  return (
    <GTProvider>
      <YourAppContent />
    </GTProvider>
  );
}

Erstellen Sie im Projektstammverzeichnis die Datei gt.config.json:

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Passen Sie die locales für Ihr Projekt an. Siehe unterstützte locales für options.

Umgebungsvariablen

Füge Folgendes zu deiner Umgebungsdatei hinzu, um Hot Reloading während der Entwicklung zu aktivieren:

VITE_GT_API_KEY="your-dev-api-key"
VITE_GT_PROJECT_ID="your-project-id"

REACT_APP_GT_API_KEY="your-dev-api-key"
REACT_APP_GT_PROJECT_ID="your-project-id"

GATSBY_GT_API_KEY="your-dev-api-key"
GATSBY_GT_PROJECT_ID="your-project-id"

REDWOOD_ENV_GT_API_KEY="your-dev-api-key"
REDWOOD_ENV_GT_PROJECT_ID="your-project-id"

Hol dir deine kostenlosen API-Schlüssel unter dash.generaltranslation.com oder führe Folgendes aus:

npx gtx-cli auth

Verwendung

Jetzt können Sie mit der Internationalisierung Ihrer Inhalte beginnen. Es gibt zwei Hauptansätze:

JSX-Inhalt mit <T>

Umschließe JSX-Elemente, um sie mit der Komponente <T> zu übersetzen:

import { T } from 'gt-react';

function Welcome() {
  return (
    <T>
      <h1>Willkommen in unserer App!</h1>
    </T>
  );
}

Für dynamische Inhalte verwenden Sie Variablen‑Komponenten wie <Var>:

import { T, Var } from 'gt-react';

function Greeting({ user }) {
  return (
    <T>
      <p>Hallo, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Weitere Informationen finden Sie im Leitfaden zur Nutzung der <T>-Komponente.

Einfache Zeichenfolgen mit useGT

Für Attribute, Labels und einfachen Text mithilfe des useGT-Hooks:

import { useGT } from 'gt-react';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('E-Mail-Adresse eingeben')}
      aria-label={t('E-Mail-Eingabefeld')}
    />
  );
}

Siehe den Leitfaden zum Übersetzen von Zeichenketten für weitere Informationen.

Testen Ihrer App

Testen Sie Ihre Übersetzungen, indem Sie die Sprache wechseln:

1. Fügen Sie eine Dropdown-Liste zur Locale-Auswahl hinzu mit <LocaleSelector>:

   import { LocaleSelector } from 'gt-react';
   
   function App() {
     return <LocaleSelector />;
   }

2. Starten Sie Ihren Dev-Server:

   npmyarnbunpnpm

   npm run dev 

   yarn run dev 

   bun run dev 

   pnpm run dev 

3. Öffnen Sie localhost:3000 und wechseln Sie die Sprache über die Dropdown-Liste zur Locale-Auswahl.

Im Development werden Übersetzungen bei Bedarf geladen (kurze Ladezeit). In Production ist alles vorab übersetzt.

Fehlerbehebung

Bereitstellung

Für die Produktion musst du Inhalte vorab übersetzen, da die Übersetzung zur Laufzeit deaktiviert ist (außer für die Funktionen <Tx> und tx).

1. Produktions-API-Schlüssel abrufen unter dash.generaltranslation.com.

   Produktionsschlüssel beginnen mit gtx-api- (anders als Dev-Schlüssel, die mit gtx-dev- beginnen). Weitere Informationen zu Umgebungsunterschieden.

2. Zu deiner CI/CD-Umgebung hinzufügen:

   GT_PROJECT_ID=your-project-id
   GT_API_KEY=gtx-api-your-production-key

   Niemals Produktionsschlüssel mit dem öffentlichen Variablenpräfix deines Frameworks versehen (wie VITE_, REACT_APP_ usw.) – sie dürfen ausschließlich serverseitig bleiben.

3. Den translate-Befehl ausführen, um deine Inhalte zu übersetzen:

   npx gtx-cli translate

   Du kannst das Verhalten des translate-Befehls mit der Datei gt.config.json konfigurieren.

   Siehe die Referenz zum CLI-Tool für weitere Informationen.

4. Dein Build-Skript aktualisieren, um vor dem Build zu übersetzen:

   {
     "scripts": {
       "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
     }
   }

Nächste Schritte

• Leitfaden zur <T>-Komponente – Ausführliche Einführung in die <T>-Komponente und JSX-Übersetzung
• Leitfaden zur Zeichenkettenübersetzung – Verwendung von useGT zur Übersetzung von Strings
• Variable Komponenten – Dynamische Inhalte mit <Var>, <Num> usw. handhaben