# General Translation React SDKs (gt-react, gt-next): React SPA guía de inicio rápido
URL: https://generaltranslation.com/es/docs/react/react-spa-quickstart.mdx
---
title: React SPA guía de inicio rápido
description: Añade varios idiomas a una aplicación React de una sola página con General Translation en menos de 10 minutos.
related:
links:
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations
---
# React SPA guía de inicio rápido
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 completamente en el navegador: lo inicializas 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+
**Consejo:** Ejecuta `npx gt@latest` para configurarlo todo con el [Asistente de configuración](/docs/cli/reference/commands/init). Esta guía explica la configuración manual.
**Nota:** Si tu aplicación se renderiza en el servidor, sigue el [guía de inicio rápido de React](/docs/react/react-quickstart).
## Guía de inicio rápido [#quickstart]
### 1. Instala los paquetes
`gt-react` es la biblioteca que habilita las traducciones en tu aplicación. `gt` es la 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
```
### 2. Crea un archivo de configuración de traducción
Crea un archivo **`gt.config.json`** en la raíz de tu proyecto. Esto le indica a la biblioteca qué idiomas admite tu proyecto:
```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 app (tu idioma de origen).
* **`locales`** — los idiomas a los que quieres traducirla. Elige cualquiera de la [lista de configuraciones regionales compatibles](/docs/platform/dashboard/reference/supported-locales).
* **`files`** — indica al 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 empaquetadores como Vite importan los archivos de traducción como módulos, por lo que deben estar dentro de `src/`.
### 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`.
### 4. Inicializa la biblioteca
Llama a **`initializeGTSPA`** una sola vez al inicio, antes de que se renderice la aplicación. Recibe tu configuración y el cargador de traducciones, determina la configuración regional del usuario y carga las traducciones correspondientes.
La forma más robusta de hacerlo es usar un pequeño módulo de entrada que primero inicialice GT y luego cargue el resto de la aplicación. Esto te permite traducir contenido a nivel de módulo.
```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 al nuevo punto de entrada: cambia su `src` de `/src/main.tsx` a `/src/index.ts`.
```html title="index.html"
```
`initializeGTSPA` se ejecuta una sola vez al iniciar: la configuración es inmutable durante toda la vida útil de la aplicación. Una vez que se completa, las traducciones pueden resolverse en cualquier módulo. **No necesitas envolver tu aplicación en un proveedor.**
**Consejo:** Sigue [Desarrollo con traducciones para SPA](/docs/react/guides/developing-spa-translations) para agregar el compilador y las credenciales de desarrollo.
### 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 tanto o tan poco JSX como quieras dentro de ``. Todo lo que haya dentro —texto, elementos anidados e incluso el formato— se traduce como una sola unidad.
Para las cadenas 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' },
];
```
### 6. Añade un selector de idioma
Añade un **``** para que los usuarios cambien de idioma:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (