---
title: "Inicio rápido con React"
description: "Traduce con verbatra los archivos de locale de i18next de tu app de React, desde la instalación hasta el primer texto en alemán en pantalla."
type: "tutorial"
---
# Inicio rápido con React

Traduce con verbatra los archivos de locale de i18next de tu app de React, desde la instalación hasta el primer texto en alemán en pantalla.

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](https://verbatra.kreitz-webdev.de/es/docs/start-with-ai.md): trabaja con los archivos que tu proyecto ya tiene y se detiene antes de gastar nada.

## Pasos [#pasos]

<Steps>
<Step>

### Instala la CLI [#instala-la-cli]

```bash
npm install --save-dev @verbatra/cli
```

verbatra es una herramienta de desarrollo y nunca llega a tu app. Los comandos de abajo usan `npx`; con pnpm, yarn o bun, ejecuta `pnpm verbatra`, `yarn verbatra` o `bun run verbatra`.



</Step>
<Step>

### Añade un archivo de locale de origen [#añade-un-archivo-de-locale-de-origen]

Si `locales/en.json` ya existe, sáltate este paso. Si no, créalo con dos textos, uno de ellos con un marcador de posición:

```json title="locales/en.json"
{
  "greeting": "Hello, {{name}}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}
```

</Step>
<Step>

### Genera una configuración [#genera-una-configuración]

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

`--format` `i18next-json` es el formato de archivo de `react-i18next`. `init` encuentra tus archivos de locale, o escribe el patrón `locales/{locale}.json` cuando aún no hay ninguno. `--yes` acepta lo que `init` detectó en lugar de preguntar. El nuevo `verbatra.config.ts` traduce de `en` a `de`; añade códigos a `targetLocales` para más idiomas.

</Step>
<Step>

### Previsualiza la ejecución sin clave [#previsualiza-la-ejecución-sin-clave]

```bash
npx @verbatra/cli translate --dry-run
```

```text output
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)
```

Una ejecución de prueba no construye ningún proveedor, así que no necesita clave, no gasta nada y no escribe nada.

</Step>
<Step>

### Traduce [#traduce]

```bash
cp .env.example .env
```

Abre `.env` y pega tu clave después de `GEMINI_API_KEY=`. ¿Aún no tienes clave? Gemini tiene un nivel gratuito: crea una en [Google AI Studio](https://aistudio.google.com/apikey). Los demás proveedores y sus variables están en [Proveedores](https://verbatra.kreitz-webdev.de/es/docs/providers.md).

```bash
npx @verbatra/cli translate
```

verbatra envía los dos textos a Gemini, comprueba que cada marcador de posición sobrevive y escribe `locales/de.json`. El texto depende del modelo, por ejemplo:

```json title="locales/de.json"
{
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}
```

</Step>
<Step>

### Comprueba que cada locale está sincronizado [#comprueba-que-cada-locale-está-sincronizado]

```bash
npx @verbatra/cli check
```

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

`check` no llama a ningún proveedor y termina con `1` en cuanto un locale deja de estar sincronizado, así que puede proteger un pull request.

</Step>
<Step>

### Carga los locales en tu app [#carga-los-locales-en-tu-app]

Añade `react-i18next`:

```bash
npm install i18next react-i18next
```

Después carga ambos archivos y muestra el saludo:

```ts title="src/i18n.ts"
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 } },
});
```

```tsx title="src/Greeting.tsx"
import { useTranslation } from "react-i18next";

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

```tsx title="src/main.tsx"
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Greeting } from "./Greeting";
import "./i18n";

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

Arranca tu app: el saludo dice `Hallo, Ada!`.

</Step>
</Steps>

## Qué acaba de pasar [#qué-acaba-de-pasar]

- `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](https://verbatra.kreitz-webdev.de/es/docs/the-lock-file.md).
- Un resultado que pierde un marcador de posición se retiene y nunca se escribe. Consulta [Seguridad de la traducción](https://verbatra.kreitz-webdev.de/es/docs/translation-safety.md).

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

## Opcional: conecta tu agente de programación [#opcional-conecta-tu-agente-de-programación]

<AvailableFrom version="0.12.0" />

```bash
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](https://verbatra.kreitz-webdev.de/es/docs/cli/init.md#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](vscode:mcp/install?%7B%22name%22%3A%22verbatra%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40verbatra%2Fmcp%22%5D%7D)

## Siguiente [#siguiente]

<Cards>
  <Card title="Añadir un idioma" href="https://verbatra.kreitz-webdev.de/es/docs/add-a-language.md" description="Añade un locale de destino y deja que una ejecución lo complete." />
  <Card title="Ejecutar verbatra en CI" href="https://verbatra.kreitz-webdev.de/es/docs/ci-and-exit-codes.md" description="Haz fallar un pull request cuando un locale se desvía." />
  <Card title="Elige tu stack" href="https://verbatra.kreitz-webdev.de/es/docs/pick-your-stack.md" description="El id de formato y la estructura de archivos de cualquier otro framework." />
</Cards>
