# General Translation React SDKs (gt-react, gt-next, gt-react-native): Internacionalización de una SPA de React
URL: https://generaltranslation.com/es/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo marcar JSX y cadenas para traducir en una SPA de React configurada.

Una vez que se ejecuta el inicializador de la SPA antes del punto de entrada de la aplicación, los componentes y las cadenas de nivel de módulo pueden usar de inmediato la configuración regional activa. Esta página reúne las reglas de implementación específicas de este modelo de inicio.

## Traducir JSX [#jsx]

Envuelve bloques completos de JSX traducible en el
[componente `<T>`](/docs/react/reference/components/t). Mantén estática la estructura dentro de
cada bloque y nunca anides un
[`<T>`](/docs/react/reference/components/t) dentro de otro:

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

Usa [`<Var>`](/docs/react/reference/components/var) para valores dinámicos sin
formato. Usa [`<Currency>`](/docs/react/reference/components/currency),
[`<DateTime>`](/docs/react/reference/components/datetime) y
[`<Num>`](/docs/react/reference/components/num) cuando un valor requiera un
formato adaptado a la configuración regional.

El contenido condicional también debe tener una estructura de traducción estable. Usa
[`<Branch>`](/docs/react/reference/components/branch) para alternativas con nombre y
[`<Plural>`](/docs/react/reference/components/plural) para texto que depende del conteo.
Incluye oraciones completas en cada rama cuando la condición afecte a la gramática
más allá de una sola palabra.

[Traducir JSX](/docs/react/guides/translating-jsx),
[Formatear variables](/docs/react/guides/formatting-variables) y
[Gestionar plurales y ramas](/docs/react/guides/handling-plurals-and-branches)
ofrecen patrones completos.

## Traducir cadenas [#strings]

En una SPA inicializada, usa preferentemente [`t()`](/docs/react/reference/functions/t-function)
para las cadenas. El bootstrap espera a que se carguen las traducciones antes de importar la
aplicación, por lo que [`t()`](/docs/react/reference/functions/t-function) también funciona
en el ámbito del módulo:

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

El mensaje de origen debe ser estático. Pasa los valores dinámicos por separado mediante la sintaxis
ICU:

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

El selector de configuración regional de la SPA recarga la aplicación al cambiar de configuración regional, por lo que
las traducciones de nivel de módulo se vuelven a evaluar con la nueva configuración regional. Consulta
[Traducción de cadenas](/docs/react/guides/translating-strings) para conocer el contexto y
los patrones de mensajes compartidos.

## Añade un selector de configuración regional [#locale-selector]

Añade el [componente `<LocaleSelector>`](/docs/react/reference/components/locale-selector)
para que los usuarios puedan elegir un idioma:

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

Lee los locales definidos para el inicializador, guarda la selección y
recarga la SPA para que las traducciones a nivel de módulo usen la nueva configuración regional.

## Valide la implementación [#validate]

Compruebe la sintaxis de las traducciones después de marcar el contenido:

```bash
npx gt validate
```

Luego, ejecuta la comprobación de tipos existente de la aplicación y la compilación de producción. Corrige cualquier
error de sintaxis de traducción, archivo de configuración regional faltante o error de importación del empaquetador antes de
generar las traducciones.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.