Übersetzen Sie React-Apps mit KI in menschlicher Qualität

Einrichten der React-Internationalisierung (mit Commit-Beispielen)

Wenn Sie bereits eine React-Anwendung haben, fahren Sie mit Schritt 2 fort.

Um eine neue React + TypeScript-App zu erstellen, öffnen Sie Ihr Terminal, navigieren Sie zu dem Ordner, in dem Sie Ihre Projekte speichern, und führen Sie Folgendes aus:

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

Dadurch wird ein Entwicklungsserver gestartet und die Standardseite von Vite + React in Ihrem Browser geöffnet.

Bevor Sie react-i18next hinzufügen, müssen Sie den Quellsprachentext vorbereiten, den Sie übersetzen möchten. Öffnen Sie src/App.tsx und fügen Sie Ihre benutzerseitigen Zeichenfolgen hinzu:

function App() {
  return (
    <div>
      <h1>Willkommen</h1>
      <p>Dies ist eine Lokalisierungsdemo.</p>
      <button onClick={() => alert('Click me')}>Klick mich</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

Für unsere Demo haben wir unsere Benutzeroberfläche mit einer Überschrift, einer Beschreibung und einer Schaltfläche einfach gehalten.

Nachdem Ihre React-App nun etwas einfachen englischen Text anzeigt, ist es an der Zeit, react-i18next zu verbinden, damit diese Zeichenfolgen aus einer Übersetzungsdatei stammen können, anstatt fest codiert zu sein.

Dieser Schritt besteht aus drei Teilen:

1. Installieren Sie i18next und react-i18next
2. Erstellen Sie Ihre englische Übersetzungsdatei (en.json)
3. Aktualisieren Sie Ihre Komponente, um den useTranslation Hook zu verwenden

3.1 Installieren der i18n-Bibliotheken

Installieren Sie die Bibliotheken aus Ihrem Projektordner:

npm install i18next react-i18next

npm install i18next react-i18next

In diesem Beispiel:

• i18next ist die zentrale Internationalisierungsbibliothek
• react-i18next fügt React-Bindungen wie den useTranslation-Hook hinzu

3.2 Erstellen der englischen Quelldatei für die Übersetzung (en.json)

Erstellen Sie die folgende Ordnerstruktur:

src/
 i18n/
 locales/
 en.json

src/
  i18n/
    locales/
      en.json

Fügen Sie dann Ihre englischen Zeichenfolgen zu src/i18n/locales/en.json hinzu:

{
 "welcome": "Welcome",
 "description": "This is a localization demo.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

Jeder Schlüssel (welcome, description, clickMe) wird dem Text zugeordnet, den Sie in der Benutzeroberfläche anzeigen möchten.

3.3 Aktualisieren von app.tsx zur Verwendung von useTranslation

Ersetzen Sie Ihren fest codierten englischen Text durch Aufrufe der t()-Übersetzungsfunktion.

Der useTranslation()-Hook ermöglicht Ihrer Komponente den Zugriff auf:

• t() – sucht eine Zeichenfolge anhand des Schlüssels
• i18n – ermöglicht es Ihnen, Sprachen programmgesteuert zu ändern

Aktualisieren Sie src/App.tsx:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

Im Moment ruft Ihre Komponente t('welcome') auf, aber i18next weiß noch nicht:

• Wo en.json lebt
• Welche Sprachen existieren
• Was die Standardsprache sein soll

In diesem Schritt initialisieren Sie i18next und weisen es an, alle JSON-Dateien aus Ihrem locales-Ordner automatisch mithilfe von Vites import.meta.glob zu laden.

4.1 Erstellen der i18n-Konfigurationsdatei

Erstellen Sie eine neue Datei unter:

src/i18n/index.ts

src/i18n/index.ts

Fügen Sie das folgende Setup hinzu:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

const modules = import.meta.glob<{default: Record<string, TranslationResources>}>('./locales/*.json', { eager: true })

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

for (const path in modules) {
 const lang = path.match(/.\/locales\/(.*)\.json$/)?.[1];
 if (lang) {
 resources[lang] = { translation: modules[path].default };
 }
}

i18n
 .use(initReactI18next)
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

const modules = import.meta.glob<{default: Record<string, TranslationResources>}>('./locales/*.json', { eager: true })

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

Dieses Setup ist nützlich, weil:

• Jede *.json-Datei, die Sie zu src/i18n/locales/ hinzufügen, wird automatisch verfügbar.
• Wenn Private Translation Cloud neue Sprachdateien erstellt (z. B. ar.json), werden diese automatisch von dieser Konfiguration geladen – es sind keine Importe oder Codeänderungen erforderlich.

4.2 Importieren von i18n in Ihrem App-Einstiegspunkt

Bevor React Ihre App rendert, muss i18next die Möglichkeit haben, sich zu initialisieren. Damit dies geschieht, müssen Sie Ihre i18n-Konfiguration in der Einstiegsdatei importieren.
Wenn Sie diesen Schritt überspringen, gibt t() nur Übersetzungsschlüssel anstelle von übersetztem Text zurück.

Öffnen Sie src/main.tsx und fügen Sie den hervorgehobenen Import hinzu:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n' // ← Diesen Import hinzufügen!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n'  // ← Add this import!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Bisher haben Sie nur statische Zeichenfolgen wie „Willkommen“ und „Klick mich“ verwendet. Echte Apps benötigen jedoch dynamische Inhalte:

• Einschließen von Links oder Formatierungen in übersetzten Text
• Begrüßen von Benutzern mit Namen
• Anzeigen von Zählungen („1 Nachricht“ vs. „3 Nachrichten“)

5.1 Interpolation: Hinzufügen von Variablen zu Übersetzungen

Anstatt Werte fest zu codieren, die sich zur Laufzeit ändern, können Sie diese in Ihre Übersetzungen interpolieren.

Fügen Sie dazu eine Variable in {{ }} in Ihrem JSON ein und übergeben Sie dann den tatsächlichen Wert, wenn Sie t() aufrufen.

Aktualisieren Sie src/i18n/locales/en.json:

{
 "welcome": "Welcome",
 "userGreeting": "Willkommen zurück, {{firstName}}!",
 "description": "Dies ist eine Lokalisierungsdemo.",
 "clickMe": "Klick mich"
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

Aktualisieren Sie nun Ihre Komponente, um die interpolierte Begrüßung zu verwenden:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

Das zweite Argument für t() ist ein Objekt mit den Werten, die Sie ersetzen möchten. Sie können so viele Variablen haben, wie Sie benötigen – stellen Sie einfach sicher, dass jede in Ihren Übersetzungen vorkommt.

5.2 Hinzufügen von Pluralformen

Einige Texte ändern sich basierend auf einer Zahl. Zum Beispiel „1 neue Nachricht“ vs. „3 neue Nachrichten“. i18next verarbeitet dies automatisch, wenn Sie Pluralformen angeben.

Aktualisieren Sie src/i18n/locales/en.json:

{
 "welcome": "Welcome",
 "userGreeting": "Willkommen zurück, {{firstName}}!",
 "description": "Dies ist eine Lokalisierungsdemo.",
 "clickMe": "Klick mich",
 "newMessages_one": "Sie haben {{count}} neue Nachricht.",
 "newMessages_other": "Sie haben {{count}} neue Nachrichten."
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}

Damit die Pluralisierung funktioniert, muss die interpolierte Variable count heißen. i18next verwendet diesen Wert, um die korrekte Pluralform für jede Sprache auszuwählen.

Verwenden Sie es nun in Ihrer Komponente:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

i18next wählt automatisch newMessages (Singular) aus, wenn count 1 ist, und newMessages_other (Plural) für jede andere Zahl.

5.3 trans-Komponente: Hinzufügen von Formatierungen und Links

Manchmal benötigen Sie Formatierungen (wie fettgedruckten Text) oder interaktive Elemente (wie Links) innerhalb einer übersetzten Zeichenfolge. Mit der Trans-Komponente können Sie JSX-Elemente (JavaScript XML) in Ihre Übersetzungen einfügen.

Importieren Sie zunächst die Trans-Komponente:

import { useTranslation, Trans } from 'react-i18next';

import { useTranslation, Trans } from 'react-i18next';

Fügen Sie src/i18n/locales/en.json einen neuen Schlüssel hinzu:

{
 "welcome": "Welcome",
 "userGreeting": "Willkommen zurück, {{firstName}}!",
 "newMessages_one": "Sie haben {{count}} neue Nachricht.",
 "newMessages_other": "Sie haben {{count}} neue Nachrichten.",
 "description": "Dies ist eine Lokalisierungsdemo.",
 "termsText": "Ich stimme den <1>Nutzungsbedingungen</1> und der <3>Datenschutzrichtlinie</3> zu.",
 "clickMe": "Klick mich"
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages.",
  "description": "This is a localization demo.",
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>.",
  "clickMe": "Click me"
}

Beachten Sie die <1>– und <3>-Tags. Dies sind Platzhalter, die Kindkomponenten nach Index zuordnen (beginnend mit 0).

Verwenden Sie nun die Trans-Komponente in Ihrem JSX:

import { useTranslation, Trans } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: "Sarah" };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
  Ich stimme den  <a href="/terms">Nutzungsbedingungen</a> und der  
          <a href="/privacy">Datenschutzrichtlinie</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
 );
}

export default App;

import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: "Sarah" };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
          I agree to the <a href="/terms">Terms of Service</a> and 
          <a href="/privacy">Privacy Policy</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
  );
}

export default App;