# gt-react: General Translation React SDK: Traducciones de desarrollo para SPA
URL: https://generaltranslation.com/es/docs/react/tutorials/spa-development-translations.mdx
---
title: Traducciones de desarrollo para SPA
description: Mira cómo las traducciones se actualizan en tiempo real mientras desarrollas tu aplicación React de una sola página
---

Las traducciones de desarrollo te permiten obtener una vista previa del contenido traducido mientras editas tu SPA. Requieren el compilador de GT y una clave de API de desarrollo.

**Requisitos previos:**

* Una aplicación React de una sola página configurada con el [SPA Quickstart](/docs/react/tutorials/quickstart-spa)
* Una clave de API de desarrollo que comience con `gtx-dev-`

## Paso 1: Instala el compilador

Instala `@generaltranslation/compiler` como dependencia de desarrollo:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

## Paso 2: Añade el plugin del compilador

Añade el plugin para tu empaquetador. Para Vite:

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json'; // [!code highlight]

export default defineConfig({
  plugins: [gtCompiler({ ...gtConfig }), react()], // [!code highlight]
});
```

<Accordions>
  <Accordion title="¿No usas Vite?">
    `@generaltranslation/compiler` también exporta plugins para `webpack`, `rollup` y `esbuild`. Importa el plugin que corresponda a tu bundler.

    ```ts
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    ```
  </Accordion>
</Accordions>

## Paso 3: Añade las credenciales de desarrollo

Obtén una clave de API de desarrollo en [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) o ejecutando:

```bash
npx gt auth
```

Luego, agrega el ID del proyecto y la clave de API de desarrollo a `.env.local`:

```bash title=".env.local"
VITE_GT_PROJECT_ID="your-project-id"
VITE_GT_DEV_API_KEY="your-dev-api-key"
```

`gt-react` lee estos valores automáticamente durante la inicialización.

<Callout type="warn">
  **Solo para desarrollo:** Usa una clave que empiece por `gtx-dev-`. Nunca expongas en código del navegador una clave de producción que empiece por `gtx-api-`.
</Callout>

## Paso 4: Empieza a desarrollar

Inicia tu servidor de desarrollo y cambia a una configuración regional distinta de la predeterminada. Cuando editas contenido traducible, el compilador registra el cambio y `gt-react` solicita una traducción de desarrollo actualizada.

## Siguientes pasos

* [SPA Quickstart](/docs/react/tutorials/quickstart-spa) - Revisa la configuración completa de la SPA
* [Compiler](/docs/react/concepts/compiler) - Aprende sobre la validación del compilador y la JSX injection automática
* [Producción vs. desarrollo](/docs/react/concepts/environments) - Comprende cómo cambia el comportamiento de traducción según el entorno