Migration

Überblick

Diese Anleitung behandelt die notwendigen Schritte, um ein Projekt, das bereits eine i18n-Bibliothek verwendet, zu gt-react zu migrieren.

Wir geben auch einige Tipps und Vorschläge, wie die Migration so reibungslos wie möglich gestaltet werden kann.

Voraussetzungen

• Ein Projekt, das derzeit eine andere i18n-Bibliothek verwendet.
• Ein grundlegendes Verständnis der gt-react-Bibliothek.

Warum migrieren?

Es gibt viele Gründe, warum Sie Ihr Projekt zu gt-react migrieren möchten.

Hier sind nur einige davon:

• Keine JSON-Dateien mehr: Verwalten Sie Übersetzungen nie wieder in JSON-Dateien. Alle Ihre Inhalte befinden sich direkt in Ihrem Code, wo sie hingehören.
• Automatische Übersetzungen: Generieren Sie hochwertige, kontextbezogene Übersetzungen mit unserem CLI-Tool. Sie müssen nie wieder auf Übersetzungen warten.
• Experimentieren in der Entwicklung: Experimentieren Sie einfach mit Übersetzungen in der Entwicklungsphase mit Hot-Reloading für Übersetzungen.

Einrichtung

npm i gt-react
npm i --save-dev 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

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

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

Migrationsstrategien

Option 1: Migrieren Sie Ihr gesamtes Projekt vollständig

Diese Option ist am unkompliziertesten, erfordert jedoch auch die meisten Codeänderungen auf einmal.

Nachdem Sie Ihr Projekt eingerichtet haben, müssen Sie alle Vorkommen Ihrer alten i18n-Bibliothek suchen und durch gt-react ersetzen.

Wenn Ihre App React-Hooks wie useTranslation verwendet, suchen Sie alle Vorkommen von useTranslation in Ihrem Code und ersetzen Sie sie durch useGT.

Anschließend müssen Sie alle String-Keys durch ihre tatsächlichen Zeichenfolgenwerte ersetzen.

Zum Beispiel, wenn Ihr alter Code so aussieht:

{
  "hello": {
    "description": "Hello, world!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

Müssen Sie ihn wie folgt ersetzen:

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// ODER
export default function MyComponent() {
  return <T>Hello, world!</T>
}

Führen Sie dies für alle Vorkommen Ihrer alten i18n-Bibliothek durch.

Option 2: Migrieren Sie Ihr Projekt vollständig, verwenden Sie aber weiterhin die Dictionaries der alten i18n-Bibliothek

Angenommen, Sie möchten Ihr Projekt auf gt-react migrieren, aber weiterhin die Dictionaries der alten i18n-Bibliothek verwenden und GT-Inline-Features nur für neue Inhalte nutzen.

In diesem Fall können Sie ähnlich wie bei Option 1 vorgehen:

Suchen Sie alle Vorkommen Ihrer alten i18n-Bibliothek, wie z. B. useTranslation-Hooks, und ersetzen Sie sie durch useDict-Hooks.

Der useDict-Hook verhält sich sehr ähnlich wie die useTranslation-Hooks und kann auf die gleiche Weise verwendet werden.

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useDict } from 'gt-react'
export default function MyComponent() {
  const t = useDict()
  return <div>{t('hello.description')}</div>
}

Bezüglich der Konfiguration müssen Sie eine Datei dictionary.[js|ts|json] im Projektstamm oder im src-Verzeichnis erstellen. Kopieren Sie den Inhalt Ihrer alten Dictionary-Datei in diese neue Datei und übergeben Sie sie dann an die GTProvider-Komponente.

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>

Weitere Details finden Sie im Dictionaries-Leitfaden.

Option 3: Verwenden Sie vorerst weiterhin die alte i18n-Bibliothek und migrieren Sie nur einen Teil Ihres Projekts zu gt-react

Diese Option ist am flexibelsten und erfordert die wenigsten Codeänderungen auf einmal.

In diesem Fall können Sie ähnlich wie bei Option 2 vorgehen, aber nur einen Teil Ihres Projekts zu gt-react migrieren.

Zum Beispiel können Sie die alte i18n-Bibliothek weiterhin für einige Komponenten verwenden und gt-react nur für andere und für neue Inhalte einsetzen.

Migrationstipps

1. Verwenden Sie den useGT Hook oder die <T> Komponente so oft wie möglich

Wann immer möglich, empfehlen wir die Verwendung des useGT Hooks oder der <T> Komponente.

Dies wird die Bearbeitung Ihrer Inhalte in Zukunft wesentlich erleichtern und Ihren Codebase viel lesbarer machen.

2. Verwenden Sie den useDict Hook für bestehende Inhalte

Der useDict Hook ist eine großartige Möglichkeit, Ihre bestehenden Wörterbücher weiterhin zu nutzen.

Wir bieten ihn als Möglichkeit an, die Migration zu erleichtern, empfehlen ihn jedoch nicht für neue Inhalte.

3. Verwendung von KI

Wenn Sie KI zur Unterstützung bei der Migration Ihres Projekts verwenden, haben wir eine LLMs.txt und LLMs-full.txt verfügbar unter:

• LLMs.txt
• LLMs-full.txt

Diese Dateien enthalten den vollständigen Inhalt dieser Dokumentation, sodass Ihr KI-Tool Zugriff auf alle Informationen hat, die es benötigt, um Ihnen bei der Migration Ihres Projekts zu helfen.