# gt-react: General Translation React SDK: t URL: https://generaltranslation.com/es/docs/react/api/strings/t-function.mdx --- title: t description: Referencia de la API para la función sincrónica t() para traducir cadenas --- ## Resumen La función `t` es una función síncrona de traducción de cadenas a nivel de módulo para aplicaciones React del lado del cliente. ```jsx import { t } from 'gt-react/browser'; const greeting = t('Hello, world!'); ``` `t` también puede usarse como literal de plantilla etiquetada: ```jsx import { t } from 'gt-react/browser'; const greeting = t`Hello, ${name}!`; ``` A diferencia de `useGT` (que requiere contexto de React) o `msg` (que codifica cadenas para resolverlas más adelante), `t()` devuelve directamente la cadena traducida. Puede llamarse desde cualquier parte del código del navegador, incluso en el ámbito del módulo, fuera de los componentes de React. **Experimental:** `t()` es una función experimental. Está diseñada solo para aplicaciones React del lado del cliente y todavía no se integra con el contexto de React (p. ej., ``, `useGT`). Si se llama en el servidor, emite una advertencia y devuelve la cadena fuente. *** ## Configuración `t()` depende de `bootstrap()` para cargar las traducciones antes de que se renderice la aplicación. Debes cambiar el punto de entrada de la aplicación para ejecutar primero `bootstrap()`. Normalmente, el punto de entrada es `main.tsx`. Crearás un archivo nuevo (por ejemplo, `bootstrap.tsx`) y harás que `index.html` apunte a ese archivo en su lugar. ### 1. Crea el punto de entrada de inicialización ```tsx // bootstrap.tsx import gtConfig from '../gt.config.json'; import { bootstrap } from 'gt-react/browser'; async function loadTranslations(locale: string) { return (await import(`./_gt/${locale}.json`)).default; } await bootstrap({ ...gtConfig, loadTranslations, }); await import('./main.tsx'); ``` De forma predeterminada, `bootstrap()` actualiza automáticamente los atributos `lang` y `dir` del elemento `` para que coincidan con la configuración regional actual. Puedes configurar este comportamiento con `htmlTagOptions`: ```tsx await bootstrap({ ...gtConfig, loadTranslations, htmlTagOptions: { updateHtmlLangTag: true, // valor predeterminado: true updateHtmlDirTag: false, // valor predeterminado: true }, }); ``` También puedes actualizar estos atributos manualmente en cualquier momento usando las funciones auxiliares `updateHtmlTagLang` y `updateHtmlTagDir` de `gt-react/browser`. ### 2. Actualiza tu `index.html` En tu `index.html`, actualiza el punto de entrada del módulo para que apunte a tu nuevo archivo de inicialización en lugar de `main.tsx`: ``` src="/src/bootstrap.tsx" ``` ### 3. Usa `t()` en cualquier parte ```tsx import { t } from 'gt-react/browser'; // A nivel de módulo — se ejecuta en el momento de la importación const navItems = [ { label: t('Home'), path: '/' }, { label: t('About'), path: '/about' }, { label: t('Contact'), path: '/contact' }, ]; export default function Nav() { return ( ); } ``` **Configuración autónoma:** `t()` actualmente no se integra con el resto del sistema de `gt-react` (p. ej., ``, `useGT`). Debes usar la configuración de inicialización descrita arriba. *** ## Literal de plantilla etiquetada `t` puede usarse como una literal de plantilla etiquetada para una sintaxis más natural: ```tsx import { t } from 'gt-react/browser'; // Estas son equivalentes: t('Hello, {name}!', { name: 'Alice' }); t`Hello, ${name}!`; ``` La forma de literal de plantilla etiquetada elimina la necesidad de marcadores de posición de estilo ICU y de objetos de opciones; las variables se interpolan directamente desde la expresión de plantilla. ### Registro global En lugar de importar `t` en cada archivo, puedes registrarlo de forma global: ```tsx // En el punto de entrada de tu aplicación import "gt-react/macros"; ``` Esto establece `globalThis.t`, lo que hace que la literal de plantilla etiquetada esté disponible en todas partes sin necesidad de una importación explícita: ```tsx // No se necesita importar const labels = { save: t`Save`, cancel: t`Cancel`, }; ``` *** ## Referencia ### Parámetros | Nombre | Tipo | Descripción | | ---------- | -------- | ------------------------------------------------------------------------------------ | | `message` | `string` | La cadena que se va a traducir. | | `options?` | `object` | Opcional. Un objeto que contiene los valores de las variables para la interpolación. | ### Devuelve `string` — La cadena traducida para la configuración regional actual, o la cadena fuente si no hay ninguna traducción disponible. *** ## Variables Puedes pasar variables con la sintaxis de llaves: ```tsx import { t } from 'gt-react/browser'; const message = t('Hello, {name}!', { name: 'Alice' }); // → "Hola, Alice!" (en español) ``` O usa la sintaxis de literal de plantilla etiquetada, que gestiona la interpolación automáticamente: ```tsx import { t } from 'gt-react/browser'; const message = t`Hello, ${name}!`; // → "Hola, Alice!" (en español, cuando name = 'Alice') ``` Los valores de las variables no se traducen; solo se traduce la plantilla de cadena que los rodea. *** ## Comportamiento ### Cómo funciona `bootstrap()` carga de forma asíncrona todas las traducciones de la configuración regional actual antes de que se importen los módulos de la aplicación. Una vez cargadas, `t()` lee los datos de traducción de forma síncrona y sin sobrecarga. Como las traducciones se resuelven al cargar el módulo: * **Cambiar de configuración regional requiere recargar por completo la página.** El navegador debe volver a ejecutar todos los módulos para que se apliquen las nuevas traducciones. * **Esto solo funciona en aplicaciones del lado del cliente.** El código a nivel de módulo se vuelve a ejecutar cuando se carga en el navegador, lo que hace posible este patrón. ### Comportamiento del lado del servidor Si se llama a `t()` en un entorno de servidor (donde `window` es `undefined`), se registra una advertencia y se devuelve la cadena fuente original. Para traducir del lado del servidor, usa hooks basados en el contexto de React como `useGT`. *** ## Ejemplo ### Archivo de constantes ```tsx // constants.ts import { t } from 'gt-react/browser'; export const ERROR_MESSAGES = { notFound: t('Page not found'), unauthorized: t('You do not have permission to view this page'), serverError: t('Something went wrong. Please try again later.'), }; ``` ### Definiciones del router ```tsx // routes.ts import { t } from 'gt-react/browser'; export const routes = [ { path: '/', label: t('Home') }, { path: '/dashboard', label: t('Dashboard') }, { path: '/settings', label: t('Settings') }, ]; ``` *** ## Notas * `t()` se importa desde `gt-react/browser`, no directamente desde `gt-react`. * Requiere llamar a `bootstrap()` antes de cargar cualquier módulo que use `t()`. * **Experimental.** Aún no se integra con `` ni con otras funciones de `gt-react` basadas en contexto. * Cambiar la configuración regional requiere recargar completamente la página. ## Registros de desarrollo * [gt-react@10.12.0](/devlog/gt-react_v10_12_0) — introducción de la función `t()` * [gt-react@10.13.0](/devlog/gt-react_v10_13_0) — compatibilidad con literales de plantilla etiquetadas ## Próximos pasos * Consulta [`useGT`](/docs/react/api/strings/use-gt) para traducir cadenas dentro de componentes de React. * Consulta [`msg`](/docs/react/api/strings/msg) para codificar cadenas y traducirlas más adelante.