# General Translation Changelog: gt-react 10.13.0: t como literal de plantilla etiquetada
URL: https://generaltranslation.com/es/blog/gt-react_v10_13_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-03-18

## Resumen

Como parte de nuestra [experimentación continua para dejar atrás el contexto de React](/devlog/gt-react_v10_12_0), `gt-react` ahora permite usar [`t`](/docs/react/reference/functions/t-function) como literal de plantilla etiquetada:

```jsx
import { t } from "gt-react/browser";

const greeting = t`Hello, ${name}!`;
```

Esta es una sintaxis alternativa a la llamada existente a la función [`t()`](/docs/react/reference/functions/t-function). En lugar de escribir marcadores de posición al estilo ICU y pasar un objeto de opciones, escribes un literal de plantilla estándar de JavaScript y la interpolación de variables se gestiona automáticamente.

## Antes y después

```jsx
// Antes — marcadores de posición ICU + objeto de opciones
t("Hello, {name}! You have {count} items.", { name, count })

// Después — literal de plantilla etiquetada
t`Hello, ${name}! You have ${count} items.`
```

La forma de literal de plantilla etiquetada elimina la necesidad de nombrar marcadores de posición o duplicar referencias a variables. Escribes la cadena igual que escribirías cualquier literal de plantilla de JavaScript.


## No requiere contexto de React

Al igual que la función [`t()`](/docs/react/reference/functions/t-function) introducida en [gt-react@10.12.0](/devlog/gt-react_v10_12_0), la forma de literal de plantilla etiquetada no depende del contexto de React. Funciona en cualquier parte del código del navegador:

* **Controladores de eventos**: ``onClick={() => alert(t`Saved!`)}``
* **Funciones auxiliares**: ``function formatError(code) { return t`Error: ${code}` }``
* **Constantes y configuración**: ``const LABELS = { save: t`Save`, cancel: t`Cancel` }``
* **Incluso completamente fuera de los componentes de React**

## Registro global

Si no quieres importar [`t`](/docs/react/reference/functions/t-function) en cada archivo, puedes registrarlo de forma global:

```js
// En el punto de entrada de tu aplicación (p. ej., layout.tsx)
import "gt-react/macros";
```

Esto establece `globalThis.t`, lo que hace que el literal de plantilla etiquetada esté disponible en cualquier parte sin necesidad de una importación explícita.

## Ejemplo

```jsx
import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}
```

O bien con registro global:

```jsx
// No se necesita importar — t está en globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};
```


## Enlaces

* [Dev log anterior: alejándonos del contexto de React (gt-react@10.12.0)](/devlog/gt-react_v10_12_0)
* [Referencia de la API de `t()`](/docs/react/reference/functions/t-function)
* [PR #1118](https://github.com/generaltranslation/gt/pull/1118)

## Sitemap

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