# gt-react: General Translation React SDK: Inicio rápido de React
URL: https://generaltranslation.com/es/docs/react.mdx
---
title: Inicio rápido de React
description: Añade varios idiomas a tu aplicación React en menos de 10 minutos
---
Al final de esta guía, tu aplicación React mostrará contenido en varios idiomas e incluirá un selector de idioma que tus usuarios podrán usar.
**Requisitos previos:**
* Una aplicación React (Vite, Create React App 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.
***
## Paso 1: Instala los paquetes
`gt-react` es la biblioteca que habilita las traducciones en tu aplicación. `gt` es la herramienta de línea de comandos que prepara las traducciones para producción.
```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 de tu proyecto. Esto le indica a la biblioteca qué idiomas admites:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — el idioma en el que está escrita tu aplicación (tu idioma de origen).
* **`locales`** — los idiomas a los que quieres traducir. Elige cualquiera de la [lista de configuraciones regionales admitidas](/docs/platform/supported-locales).
* **`files`** — indica a la CLI dónde guardar los archivos de traducción. La ruta de `output` debe coincidir con la ruta de importación de tu función `loadTranslations` (Paso 3).
**¿Usas Vite?** Establece la ruta de salida en `"src/_gt/[locale].json"` en lugar de `"public/_gt/[locale].json"`. Vite importa los archivos de traducción como módulos, por lo que deben estar dentro de `src/` en lugar de `public/`.
***
## Paso 3: Crea un cargador de traducciones
`gt-react` se ejecuta por completo en el cliente, por lo que necesita una función para cargar los archivos de traducción en runtime. Crea un archivo `loadTranslations`:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`../public/_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 `public/_gt/`. La CLI genera estos archivos cuando ejecutas `npx gt translate`.
Como los archivos de traducción de Vite están en `src/_gt/` (consulta el Paso 2), actualiza la ruta de importación:
```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 {};
}
}
```
La configuración de webpack de CRA bloquea las importaciones dinámicas con `import()` fuera de `src/`. Usa `fetch()` en su lugar:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const response = await fetch(`${process.env.PUBLIC_URL}/_gt/${locale}.json`);
if (!response.ok) throw new Error('Not found');
return await response.json();
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
***
## Paso 4: Agrega `GTProvider` a tu aplicación
El componente **`GTProvider`** le da acceso a las traducciones a toda tu aplicación. Envuelve tu aplicación en la raíz:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* El contenido de tu aplicación */}
);
}
```
`GTProvider` recibe tu configuración y el cargador de traducciones como props. Administra el estado de la configuración regional y pone las traducciones a disposición de todos los componentes hijos.
CRA restringe las importaciones a archivos dentro de `src/`, por lo que `import gtConfig from '../gt.config.json'` fallará. Puedes copiar `gt.config.json` en `src/` o incluir la configuración directamente en línea:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* El contenido de tu aplicación */}
);
}
```
***
## Paso 5: Marca 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.
***
## Paso 6: Agrega 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 (