Inicio rápido con React

Al final de esta página, tu app de React muestra un texto en alemán que verbatra tradujo desde locales/en.json, y un archivo de bloqueo hace que cada ejecución posterior traduzca solo lo que cambió. Necesitas Node.js ^22.18.0 || >=24, un proyecto de React y unos diez minutos. Los primeros cuatro pasos no necesitan cuenta ni clave de API.

¿Ya tienes archivos de locale y un agente de programación? Dale en su lugar el prompt de Configura verbatra con un agente de IA: trabaja con los archivos que tu proyecto ya tiene y se detiene antes de gastar nada.

PasosCopiar enlace a esta sección

npm install --save-dev @verbatra/cli

{
  "greeting": "Hello, {{name}}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}

npx @verbatra/cli init --format i18next-json --provider gemini --yes

npx @verbatra/cli translate --dry-run

verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)

cp .env.example .env

npx @verbatra/cli translate

{
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}

npx @verbatra/cli check

[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync

npm install i18next react-i18next

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import de from "../locales/de.json";
import en from "../locales/en.json";

i18n.use(initReactI18next).init({
  lng: "de",
  fallbackLng: "en",
  resources: { en: { translation: en }, de: { translation: de } },
});

import { useTranslation } from "react-i18next";

export function Greeting() {
  const { t } = useTranslation();
  return <p>{t("greeting", { name: "Ada" })}</p>;
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Greeting } from "./Greeting";
import "./i18n";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Greeting />
  </StrictMode>,
);

Qué acaba de pasarCopiar enlace a esta sección

• verbatra.lock.json guarda un hash de cada texto de origen, para que la siguiente ejecución envíe solo textos nuevos y modificados. Consulta El archivo de bloqueo.
• Un resultado que pierde un marcador de posición se retiene y nunca se escribe. Consulta Seguridad de la traducción.

Haz commit de los archivos de locale, verbatra.lock.json y verbatra.provenance.json juntos.

Opcional: conecta tu agente de programación Disponible a partir de 0.12.0Copiar enlace a esta sección

npx @verbatra/cli init --agent

Con la configuración ya creada, init --agent la conserva y añade solo los archivos del agente: las reglas de verbatra en AGENTS.md (o CLAUDE.md, cuando es tu único archivo de instrucciones) y el servidor MCP de verbatra, sin las herramientas que gastan, en la configuración de proyecto de cada agente de programación que detecta. Qué archivos escribe para cada agente, y cómo eliges tú los agentes con --client, está en Preparar los agentes de programación. --dry-run muestra los archivos sin escribirlos.

O, sin la CLI, añade solo el servidor MCP a tu perfil de usuario de VS Code; usa una vía, nunca las dos:

Añadir a VS Code

SiguienteCopiar enlace a esta sección