# General Translation React SDKs (gt-react, gt-next, gt-react-native): Inicio rápido de React Router
URL: https://generaltranslation.com/es/docs/react/react-router-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Agrega General Translation a una aplicación con el framework React Router, incluidas las tiendas de Shopify Hydrogen, y traduce tu primer contenido.
`gt-react` funciona en el modo framework de React Router a través de tu ruta raíz. La biblioteca se inicializa en `app/root.tsx`, la configuración regional de cada visitante se resuelve en el cargador raíz y [`GTProvider`](/docs/react/reference/components/gt-provider) se renderiza desde el `Layout` raíz.
Usa esta guía de inicio rápido para aplicaciones creadas con `@react-router/dev`. Si usas React Router como biblioteca dentro de una aplicación de una sola página con Vite, sigue mejor la [Guía de inicio rápido para una SPA de React](/docs/react/react-spa-quickstart).
Ejecuta [`npx gt@latest init`](/docs/cli/reference/commands/init) desde la raíz de la aplicación para automatizar la configuración. El asistente instala `gt-react`, crea la configuración y el cargador de traducciones, y configura un `app/root.tsx` generado con la plantilla inicial de create-react-router o de Hydrogen. Los demás archivos raíz no se modifican y el asistente enumera las acciones manuales necesarias; esta guía explica cómo hacer la misma configuración a mano.
*Nota: Esta configuración requiere `gt-react` 11.1.3 o posterior y una aplicación que se renderice en cada solicitud. No se admiten el modo SPA (`ssr: false`), el renderizado previo ni el RSC Framework Mode.*
## Inicio rápido [#quickstart]
### 1. Instala los paquetes
`gt-react` es la biblioteca que se encarga de las traducciones en tu aplicación. `gt` es la CLI que las genera.
```bash
npm install gt-react && npm install gt --save-dev
```
```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 `gt.config.json`
Crea un archivo `gt.config.json` en la raíz del proyecto. En él se declaran el idioma de origen, las configuraciones regionales de destino y la ubicación en la que se escriben los archivos de traducción.
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "app/_gt/[locale].json"
}
}
}
```
* `defaultLocale`: el idioma en el que está escrita tu aplicación.
* `locales`: los idiomas a los que quieres traducir. Elígelos entre las [configuraciones regionales compatibles](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output`: la ubicación donde la CLI escribe los archivos de traducción. Guárdalos dentro de `app/` para que Vite los empaquete junto con el código del servidor y del cliente.
### 3. Crea un cargador de traducciones
Crea `app/loadTranslations.ts`. Este archivo importa el archivo de traducciones de una configuración regional cuando el cargador raíz lo solicita.
```ts title="app/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
}
```
Después, crea un archivo `{}` vacío para cada configuración regional de destino, como `app/_gt/es.json` y `app/_gt/ja.json`; [`gt init`](/docs/cli/reference/commands/init) los crea automáticamente. Si una configuración regional no tiene archivo de traducciones, se renderiza en tu idioma predeterminado.
### 4. Configura la ruta raíz
Llama a [`initializeGT`](/docs/react/reference/config#initialize) una sola vez en el ámbito del módulo en `app/root.tsx`, devuelve la configuración regional y una instantánea de traducciones desde el cargador raíz, y envuelve el contenido de `Layout` en [`GTProvider`](/docs/react/reference/components/gt-provider). Añade las líneas resaltadas a tu archivo raíz actual:
```tsx title="app/root.tsx"
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData, // [!code ++]
} from 'react-router';
import { GTProvider, getTranslationsSnapshot, initializeGT, parseLocale } from 'gt-react'; // [!code ++]
import type { Route } from './+types/root';
import gtConfig from '../gt.config.json'; // [!code ++]
import loadTranslations from './loadTranslations'; // [!code ++]
import './app.css';
initializeGT({ ...gtConfig, loadTranslations }); // [!code ++]
// [!code ++:11]
// Las páginas de error no tienen datos del loader. Omite GTProvider en ellas para que no
// sustituya la configuración regional guardada del visitante por la predeterminada.
function RootGTProvider({ children }: { children: React.ReactNode }) {
const data = useRouteLoaderData('root');
if (!data) return <>{children};
return (
{children}
);
}
// [!code ++:4]
export async function loader({ request }: Route.LoaderArgs) {
const locale = parseLocale(request);
return { locale, translations: await getTranslationsSnapshot(locale) };
}
export function Layout({ children }: { children: React.ReactNode }) {
const locale = useRouteLoaderData('root')?.locale ?? gtConfig.defaultLocale; // [!code ++]
return (
// [!code ++]
{/* [!code ++] */}
{children}
{/* [!code ++] */}
);
}
export default function App() {
return ;
}
```
`parseLocale` lee la cookie de configuración regional, luego la cabecera `Accept-Language` y, si no encuentra ninguna, recurre a `defaultLocale` como valor alternativo. Si tu ruta raíz ya tiene un `loader`, añade `locale` y `translations` al objeto que devuelve.
*Nota: Las páginas de error que no tienen datos del cargador raíz, como un 404 directo o un error del propio cargador raíz, se renderizan sin [`GTProvider`](/docs/react/reference/components/gt-provider). Los componentes de traducción y los hooks, como [``](/docs/react/reference/components/t) y [`useLocale`](/docs/react/reference/hooks/use-locale), lanzan una excepción en ese caso y convierten la página de error en un error del servidor, así que no traduzcas el `ErrorBoundary` raíz.*
### 5. Marca el contenido para traducir
Envuelve el JSX en el componente [``](/docs/react/reference/components/t) para traducirlo directamente donde está y usa [`useGT`](/docs/react/reference/hooks/use-gt) para cadenas simples, como los valores de `aria-label`. Añade un [``](/docs/react/reference/components/locale-selector) para que los visitantes puedan cambiar de idioma.
```tsx title="app/routes/home.tsx"
import { LocaleSelector, T, useGT } from 'gt-react';
export default function Home() {
const gt = useGT();
return (