# gt-react: General Translation React SDK: Quickstart de SPA
URL: https://generaltranslation.com/es/docs/react/tutorials/quickstart-spa.mdx
---
title: Quickstart de SPA
description: Añade varios idiomas a tu aplicación React de una sola página en menos de 10 minutos
---
Al final de esta guía, tu aplicación React de una sola página mostrará contenido en varios idiomas, con un selector de idioma con el que tus usuarios podrán interactuar.
En una aplicación de una sola página, `gt-react` se ejecuta por completo en el navegador: se inicializa una sola vez al arrancar con `initializeGTSPA()`, y no necesitas un componente proveedor.
**Requisitos previos:**
* Una aplicación React renderizada en el cliente (Vite, webpack o similar)
* Node.js 18+
**¿Quieres una configuración automática?** Ejecuta `npx gt@latest` para configurarlo todo con el [Asistente de configuración](/docs/cli/init). Esta guía explica la configuración manual.
**¿Tu aplicación se renderiza en el servidor?** Si tu aplicación se renderiza en el servidor, sigue el [quickstart de React](/docs/react).
***
## Paso 1: Instala los paquetes
`gt-react` es la biblioteca que gestiona las traducciones en tu aplicación. `gt` es la herramienta CLI que prepara tus traducciones.
```bash
npm i gt-react
npm i -D gt
```
```bash
yarn add gt-react
yarn add --dev gt
```
```bash
bun add gt-react
bun add --dev gt
```
```bash
pnpm add gt-react
pnpm add --save-dev gt
```
***
## Paso 2: Crea un archivo de configuración de traducción
Crea un archivo **`gt.config.json`** en la raíz del proyecto. Esto le indica a la biblioteca qué idiomas admites:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — el idioma en el que está escrita tu aplicación (tu idioma fuente).
* **`locales`** — los idiomas a los que quieres traducir. Elige cualquiera de la [lista de locales compatibles](/docs/platform/supported-locales).
* **`files`** — indica a la CLI dónde guardar los archivos de traducción. La ruta `output` debe coincidir con la ruta de importación de tu función `loadTranslations` (Paso 3).
**Ubicación del archivo:** Los bundlers como Vite importan los archivos de traducción como módulos, así que deben estar dentro de `src/`.
***
## Paso 3: Crea un cargador de traducciones
En una SPA, `gt-react` necesita una función para cargar archivos de traducción en el navegador en tiempo de ejecución. Crea un archivo `loadTranslations`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
Esta función carga archivos JSON de traducción desde tu directorio `src/_gt/`. La CLI genera estos archivos cuando ejecutas `npx gt translate`.
***
## Paso 4: Inicializa la biblioteca
Llama a **`initializeGTSPA`** una sola vez al inicio, antes de que se renderice tu aplicación. Recibe tu configuración y el cargador de traducciones, determina la configuración regional del usuario y carga las traducciones correspondientes.
El patrón más sólido es usar un pequeño módulo de entrada que primero inicialice GT y luego cargue el resto de la aplicación:
```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
await initializeGTSPA({
defaultLocale: gtConfig.defaultLocale,
locales: gtConfig.locales,
loadTranslations,
});
await import('./main'); // renderizar la app solo después de que GT esté listo
```
```tsx title="src/main.tsx"
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(
);
```
Luego, actualiza la etiqueta `script` de tipo módulo en tu `index.html` para que apunte a la nueva entrada: cambia su `src` de `/src/main.tsx` a `/src/index.ts`.
`initializeGTSPA` se ejecuta una sola vez al iniciar la aplicación; la configuración es inmutable durante toda la vida útil de la app. Una vez que se resuelve, todos los componentes y hooks de tu app pueden acceder a las traducciones. **No necesitas envolver tu app en un proveedor.**
**¿Quieres traducciones en vivo durante el desarrollo?** Sigue la [guía de traducciones de desarrollo para SPA](/docs/react/tutorials/spa-development-translations) para añadir el compilador y las credenciales de desarrollo.
***
## Paso 5: Marcar el contenido para traducir
Ahora, envuelve cualquier texto que quieras traducir con el componente **``**. `` significa "traducir":
```tsx title="src/components/Welcome.tsx"
import { T } from 'gt-react';
export default function Welcome() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Puedes envolver dentro de `` tanto o tan poco JSX como quieras. Todo lo que haya dentro —texto, elementos anidados e incluso el formato— se traduce como una sola unidad.
Para las cadenas que estén fuera de los componentes de React, usa **`t()`**. Funciona a nivel de módulo porque `initializeGTSPA()` carga las traducciones antes que el resto de tu aplicación:
```ts title="src/navigation.ts"
import { t } from 'gt-react';
export const navigation = [
{ label: t('Home'), href: '/' },
{ label: t('About'), href: '/about' },
];
```
***
## Paso 6: Añade un selector de idioma
Añade un **``** para que los usuarios puedan cambiar de idioma:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (