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: Vollständige Migration Ihres gesamten Projekts

Diese Option ist die einfachste und erfordert gleichzeitig die meisten Codeänderungen auf einmal.

Nachdem Sie Ihr Projekt eingerichtet haben, müssen Sie nach allen Instanzen Ihrer alten i18n-Bibliothek suchen und diese durch gt-react ersetzen.

Wenn Ihre App React Hooks wie useTranslation verwendet, suchen Sie nach allen Instanzen von useTranslation in Ihrer Codebasis und ersetzen Sie diese durch useGT.

Dann müssen Sie alle String-Schlüssel durch ihre tatsächlichen String-Werte ersetzen.

Wenn Ihr alter Code beispielsweise so aussieht:

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

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

Müssen Sie ihn durch folgendes ersetzen:

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

Tun Sie dies für alle Instanzen Ihrer alten i18n-Bibliothek.

Option 2: Vollständige Migration Ihres Projekts, aber weiterhin Verwendung von Wörterbüchern aus der alten i18n-Bibliothek

Nehmen wir an, Sie möchten Ihr Projekt zu gt-react migrieren, aber Sie möchten weiterhin Wörterbücher aus der alten i18n-Bibliothek verwenden und GT-Inline-Features nur für neue Inhalte nutzen.

In diesem Fall können Sie etwas Ähnliches wie Option 1 tun:

Finden Sie alle Instanzen Ihrer alten i18n-Bibliothek, wie useTranslation Hooks, und ersetzen Sie diese durch useTranslations Hooks.

Der useTranslations Hook verhält sich sehr ähnlich wie useTranslation Hooks, und Sie können ihn auf die gleiche Weise verwenden.

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

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

In Bezug auf die Konfiguration müssen Sie eine dictionary.[js|ts|json] Datei in Ihrem Projektverzeichnis oder src Verzeichnis erstellen. Kopieren Sie den Inhalt Ihrer alten Wörterbuchdatei 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>

Siehe den Wörterbücher Leitfaden für weitere Details.

Option 3: Weiterhin die alte i18n-Bibliothek verwenden und nur einen Teil Ihres Projekts zu gt-react migrieren

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

In diesem Fall können Sie etwas Ähnliches wie Option 2 tun, aber nur einen Teil Ihres Projekts zu gt-react migrieren.

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

Migrationstipps

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

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

Dies wird die Bearbeitung Ihrer Inhalte in Zukunft viel einfacher machen und Ihre Codebasis viel lesbarer gestalten.

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

Der useTranslations Hook ist eine großartige Möglichkeit, Ihre bestehenden Wörterbücher weiter zu verwenden.

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

3. Verwendung von KI

Wenn Sie KI verwenden, um bei der Migration Ihres Projekts zu helfen, 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 Zugang zu allen Informationen hat, die es benötigt, um Ihnen bei der Migration Ihres Projekts zu helfen.