React-Einrichtung

Verwendung

npx gtx-cli setup

Der Befehl gtx-cli setup richtet Ihr Projekt automatisch für die Übersetzung mit gt-next oder gt-react ein. Dabei wird der Dateibaum Ihres Projekts analysiert und babel verwendet, um die <T>-Komponente um statische Inhalte zu legen. Jeglicher dynamischer Inhalt wird automatisch mit <Var>-Komponenten umschlossen.

Dieser Befehl wird als Teil des init-Setup-Assistenten ausgeführt. Zusätzlich kann dieser Befehl unabhängig über npx gtx-cli setup ausgeführt werden.

Dieser Befehl sollte einmal ausgeführt werden, wenn Sie Ihr Projekt erstmals internationalisieren. Bei späteren Änderungen sollten Sie den Befehl scan verwenden, um Ihr Projekt zu aktualisieren.

Weitere Details finden Sie beim scan-Befehl.

src/app/Home.js

import { T, Var } from 'gt-next';  
 
export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, World! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

Wenn Ihr Projekt den Next.js App Router verwendet, fügt der Setup-Befehl eine <GTProvider>-Komponente in die entsprechende layout.jsx-Datei ein.

Parameter

Parameter	Beschreibung	Typ	Optional	Standard
`--src <path>`	Das zu scannende Quellverzeichnis	`string`	`true`	`./src && ./app && ./pages && ./components`
`--config <path>`	Der Pfad zur GT-Konfigurationsdatei	`string`	`true`	`"gt.config.json"`

Verhalten

Konfigurationsdatei

Wenn du das CLI-Tool zum ersten Mal ausführst, wird es versuchen, eine gt.config.json-Datei im Stammverzeichnis deines Projekts zu erstellen. Diese Datei enthält Metadaten über dein Projekt, die für die Übersetzung deiner Inhalte verwendet werden.

Mehr über die gt.config.json-Datei erfährst du hier.

Die `id`-Eigenschaft

Der Setup-Befehl bietet die Möglichkeit, automatisch eindeutige IDs für deine <T>-Komponenten zu generieren. Dies ist nützlich für Projekte, die viele <T>-Komponenten verwenden und vermeiden möchten, jeder manuell eine eindeutige ID zuzuweisen.

Diese id ist nützlich, um bestimmte Übersetzungen im Übersetzungseditor und in der Konsole zu referenzieren.

`<T>`-Injektionsverhalten

Grundlegender Fall

Das CLI wird JSX-Elemente auf der höchstmöglichen Ebene umschließen. Das bedeutet, dass es die gesamte Komponente in eine <T>-Komponente einwickelt, wenn sie nicht bereits umschlossen ist.

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

Weitere Details zur Umschließung mit der <T>-Komponente findest du in der Referenz.

`<GTProvider>`-Verhalten

Für den Next.js App Router wird der Setup-Befehl automatisch die <T>-Komponente in eine <GTProvider>-Komponente innerhalb der entsprechenden layout.jsx-Datei einbetten.

Zusätzlich wird es das withGTConfig Next.js-Plugin in der next.config.js-Datei für dich einrichten.

Automatische Formatierung

Der Setup-Befehl formatiert die Änderungen, die er an deinem Codebase vornimmt, automatisch mit Prettier, Biome oder ESLint, je nach der Konfiguration deines Projekts.