Einführung

Das General Translation React SDK ist eine Open-Source‑Internationalisierungsbibliothek (i18n) für React‑Anwendungen.

Es bietet einen umfassenden Satz an Tools, um Ihre React‑Anwendung einfach und wartbar zu internationalisieren – mit Funktionsparität zu anderen beliebten i18n‑Bibliotheken.

Das SDK kann eigenständig, ohne die General Translation‑Plattform, verwendet werden und verhält sich ähnlich wie andere i18n‑Bibliotheken.

Es integriert sich jedoch auch in unsere Plattform und bietet erweiterte Funktionen:

• Hot Reloading von Übersetzungen in der Entwicklungsumgebung
• Automatische KI‑Übersetzungen
• Synchronisierung von Übersetzungen mit der General Translation‑Plattform
• Native Integration mit unserem Translation‑CDN (Content Delivery Network)

Konzepte

Es gibt 5 zentrale Konzepte, die du beim SDK verstehen solltest.

Die <GTProvider>-Komponente

Die <GTProvider>-Komponente stellt Ihrer Anwendung den Übersetzungskontext bereit, einschließlich der aktuellen Sprache und der zugehörigen Übersetzungen.

import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* Ihr Anwendungsinhalt */}
      </div>
    </GTProvider>
  );
}

Wichtig: Der Provider sollte Ihre gesamte Anwendung umschließen und so weit oben wie möglich im Komponentenbaum platziert werden, zum Beispiel in Ihrer Root-App-Komponente.

Weitere Informationen finden Sie in der API-Referenz zu GTProvider.

Die <T>-Komponente

Die <T>-Komponente ist die empfohlene Methode, um Inhalte in Ihrer Anwendung zu übersetzen.

Sie ist eine React-Komponente, die beliebige JSX-Elemente umschließen kann und den Inhalt des Elements automatisch in einer unterstützten Sprache rendert.

Beispiele

<T>
  <div>Hallo, Welt!</div>
</T>

<T>
  <div>
    <h1> Hier ist ein Bild </h1>
    <img src="https://example.com/image.png" alt="Beispiel" />
  </div>
</T>

<T>
  Die Formatierung lässt sich einfach mit der `<T>`-Komponente durchführen.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>

Die <T>-Komponente arbeitet mit Variablenkomponenten wie <Num>, <DateTime> und <Currency> zusammen, um dynamische Inhalte zu formatieren.

Siehe den Leitfaden zur Komponente <T>, um mehr über die verschiedenen Verwendungsmöglichkeiten der <T>-Komponente zu erfahren.

Der useGT-Hook

Der useGT-Hook ist ein React-Hook, der ähnlich wie die <T>-Komponente verwendet werden kann – mit einigen Abstrichen.

Der Hook gibt eine Funktion zurück, mit der sich Strings übersetzen lassen.

const t = useGT();

t('Hallo, Welt!');

Im Vergleich zur <T>-Komponente bietet der useGT-Hook mehr Flexibilität in Ihrem Code.

Wenn Sie beispielsweise eine komplexe Datenstruktur mit verschachtelten Zeichenketten haben, wäre eine <T>-Komponente schwieriger zu verwenden.

const t = useGT();
const data = {
  title: t('Hallo, Welt!'),
  description: t('Dies ist eine Beschreibung'),
};

Siehe den Leitfaden zu strings, um mehr über den useGT Hook zu erfahren.

Die Funktion msg

Die Funktion msg wird verwendet, um Zeichenfolgen zur Übersetzung zu markieren, die in mehreren Komponenten genutzt oder in Konfigurationsobjekten gespeichert werden.

Das ist besonders nützlich für gemeinsam verwendete Inhalte wie Navigationsbezeichnungen, Formularmeldungen oder beliebigen Text, der an mehreren Stellen in Ihrer Anwendung erscheint.

// Strings für Übersetzung markieren
import { msg } from 'gt-react';

const navItems = [
  { label: msg('Startseite'), href: '/' },
  { label: msg('Über uns'), href: '/about' },
  { label: msg('Kontakt'), href: '/contact' }
];

// Markierte Strings dekodieren und verwenden
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}

Die Funktion msg versieht Strings mit Übersetzungsmetadaten, und useMessages wertet sie aus.

Weitere Informationen zur Funktion msg finden Sie im Leitfaden zu Shared Strings.

Der useTranslations-Hook

Der useTranslations-Hook ist ein React-Hook, der eine Funktion zurückgibt, mit der Sie Übersetzungen zu einem bestimmten Schlüssel abrufen können.

const dictionary = {
  hello: {
    world: 'Hallo, Welt!',
  },
};

const translate = useTranslations();
translate('hello.world');

Dieses Verhalten ähnelt anderen Übersetzungsbibliotheken wie react-i18next und next-intl.

Weitere Informationen zum useTranslations-Hook finden Sie im Leitfaden dictionaries.

Weitere Details finden Sie in der useTranslations API Reference.

Nächste Schritte

• Erfahren Sie, wie Sie Ihr React-Projekt mit dem SDK einrichten: Schnellstart
• Erfahren Sie, wie Sie JSX-Inhalte mit der <T>-Komponente übersetzen: JSX-Übersetzungsleitfaden
• Erfahren Sie, wie Sie Strings mit dem useGT-Hook übersetzen: Leitfaden zur String-Übersetzung
• Erfahren Sie, wie Sie gemeinsam genutzte Strings mit der msg-Funktion verwenden: Leitfaden zu gemeinsamen Strings