# gt-react: General Translation React SDK: resumen
URL: https://generaltranslation.com/es/docs/react/introduction.mdx
---
title: resumen
description: Descripción general del SDK de React de General Translation
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Introducción

El SDK de React de General Translation es una biblioteca de internacionalización (i18n) de código abierto para aplicaciones de React.

Proporciona un conjunto completo de herramientas para internacionalizar tu aplicación React de forma sencilla y fácil de mantener, con funcionalidades equivalentes a las de otras bibliotecas populares de i18n.

El SDK puede usarse de forma independiente sin la plataforma de General Translation y se comporta de forma similar a otras bibliotecas de i18n.

Sin embargo, también se integra con nuestra plataforma para ofrecer funcionalidades avanzadas:

* Recarga en caliente de traducciones en desarrollo
* Traducciones automáticas con IA
* Sincronización de traducciones con la plataforma de General Translation
* Integración nativa con nuestro CDN de traducción

## Conceptos

Hay 5 conceptos principales que debes entender sobre el SDK.

<Steps>
  <Step>
    El componente [`<GTProvider>`](/docs/react/api/components/gtprovider)
  </Step>

  <Step>
    El componente [`<T>`](/docs/react/api/components/t)
  </Step>

  <Step>
    El hook [`useGT`](/docs/react/api/strings/use-gt)
  </Step>

  <Step>
    La función [`msg`](/docs/react/api/strings/msg) para cadenas compartidas
  </Step>

  <Step>
    (Opcional) El hook [`useTranslations`](/docs/react/api/dictionary/use-translations)
  </Step>
</Steps>

## El componente `<GTProvider>`

El componente [`<GTProvider>`](/docs/react/api/components/gtprovider) proporciona el contexto de traducción de tu aplicación, incluido el idioma actual y las traducciones correspondientes.

```tsx
import { GTProvider } from 'gt-react';

function App() {
  return (
    <GTProvider>
      <div>
        {/* El contenido de tu aplicación */}
      </div>
    </GTProvider>
  );
}
```

**Importante:** El proveedor debe envolver toda tu aplicación y colocarse lo más arriba posible en el árbol de componentes, por ejemplo, en el componente App raíz.

Consulta la referencia de la API de [`GTProvider`](/docs/react/api/components/gtprovider) para obtener más información.


## El componente `<T>`

El componente [`<T>`](/docs/react/api/components/t) es la forma recomendada de traducir contenido en tu aplicación.

Es un componente de React que puede usarse para envolver cualquier elemento JSX y renderiza automáticamente el contenido del elemento en un idioma compatible.

<Callout type="info">
  Recomendamos usar el componente [`<T>`](/docs/react/api/components/t) siempre que sea posible, ya que ofrece la mayor flexibilidad para las traducciones.

  A diferencia de las cadenas, el componente [`<T>`](/docs/react/api/components/t) puede usarse para traducir contenido HTML, lo que lo hace mucho más versátil que las traducciones de cadenas.
</Callout>

### Ejemplos

```tsx
<T>
  <div>Hello, world!</div>
</T>
```

```tsx
<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>
```

```tsx
<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency currency="USD">{1000}</Currency>
</T>
```

El componente [`<T>`](/docs/react/api/components/t) funciona con [componentes de variable](/docs/react/guides/variables) como [`<Num>`](/docs/react/api/components/num), [`<DateTime>`](/docs/react/api/components/datetime) y [`<Currency>`](/docs/react/api/components/currency) para dar formato al contenido dinámico.

Consulta la [guía del componente `<T>`](/docs/react/guides/t) para conocer las diferentes formas de usar el componente [`<T>`](/docs/react/api/components/t).


## El hook `useGT`

El hook [`useGT`](/docs/react/api/strings/use-gt) es un hook de React que puede usarse de forma similar al componente [`<T>`](/docs/react/api/components/t), aunque con ciertas limitaciones.

El hook devuelve una función que puede usarse para traducir cadenas.

```tsx
const gt = useGT();

gt('Hello, world!');
```

En comparación con el componente [`<T>`](/docs/react/api/components/t), el hook [`useGT`](/docs/react/api/strings/use-gt) ofrece más flexibilidad en tu base de código.

Por ejemplo, si tienes una estructura de datos compleja con cadenas anidadas, sería más difícil usar un componente [`<T>`](/docs/react/api/components/t).

```tsx
const gt = useGT();
const data = {
  title: gt('Hello, world!'),
  description: gt('This is a description'),
};
```

Consulta la guía de [cadena](/docs/react/guides/strings) para obtener más información sobre el hook [`useGT`](/docs/react/api/strings/use-gt).


## La función `msg`

La función [`msg`](/docs/react/api/strings/msg) se usa para marcar, para su traducción, cadenas que se utilizan en varios componentes o se almacenan en objetos de configuración.

Esto resulta especialmente útil para contenido compartido, como etiquetas de navegación, mensajes de formularios o cualquier texto que aparezca en varios lugares de tu aplicación.

```tsx
// Marcar cadenas para su traducción
import { msg } from 'gt-react';

const navItems = [
  { label: msg('Home'), href: '/' },
  { label: msg('About'), href: '/about' },
  { label: msg('Contact'), href: '/contact' }
];
```

```tsx
// Decodificar y usar las cadenas marcadas
import { useMessages } from 'gt-react';

function Navigation() {
  const m = useMessages();
  
  return (
    <nav>
      {navItems.map(item => (
        <a key={item.href} href={item.href}>
          {m(item.label)}
        </a>
      ))}
    </nav>
  );
}
```

La función [`msg`](/docs/react/api/strings/msg) codifica cadenas con metadatos de traducción, y [`useMessages`](/docs/react/api/strings/use-messages) las decodifica.

<Callout type="info">
  Usa [`msg`](/docs/react/api/strings/msg) para contenido compartido que deba traducirse de forma coherente en toda tu aplicación. Para contenido específico de un componente, prefiere [`<T>`](/docs/react/api/components/t) o [`useGT`](/docs/react/api/strings/use-gt).
</Callout>

Consulta la guía de [cadenas compartidas](/docs/react/guides/shared-strings) para obtener más información sobre la función `msg`.


## El hook `useTranslations`

El hook [`useTranslations`](/docs/react/api/dictionary/use-translations) es un hook de React que devuelve una función que puede usarse para obtener traducciones de una clave determinada.

```tsx title="dictionary.ts"
const dictionary = {
  hello: {
    world: '¡Hola, mundo!',
  },
};
```

```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```

Este comportamiento es similar al de otras bibliotecas de traducción, como [`react-i18next`](https://react.i18next.com/) y [`next-intl`](https://next-intl-docs.vercel.app/).

<Callout type="warn">
  No recomendamos usar el hook [`useTranslations`](/docs/react/api/dictionary/use-translations) en tu aplicación. Usar con frecuencia el hook [`useTranslations`](/docs/react/api/dictionary/use-translations) hará que tu base de código sea más difícil de mantener
  y generará una deuda técnica considerable.

  En su lugar, te recomendamos usar el componente [`<T>`](/docs/react/api/components/t) o el hook [`useGT`](/docs/react/api/strings/use-gt).

  Si estás migrando desde otra biblioteca de i18n, el hook [`useTranslations`](/docs/react/api/dictionary/use-translations) es un reemplazo directo y puede ser útil para migrar tu base de código de forma gradual.
</Callout>

Consulta la guía de [diccionarios](/docs/react/guides/dictionaries) para obtener más información sobre el hook [`useTranslations`](/docs/react/api/dictionary/use-translations).

Consulta la [referencia de la API de useTranslations](/docs/react/api/dictionary/use-translations) para obtener más información.

***


## Próximos pasos

* Aprende a configurar tu proyecto de React con el SDK: [inicio rápido](/docs/react)
* Aprende a traducir contenido JSX con el componente [`<T>`](/docs/react/api/components/t): [Guía de traducción de JSX](/docs/react/guides/t)
* Aprende a traducir cadenas con el hook [`useGT`](/docs/react/api/strings/use-gt): [Guía de traducción de cadenas](/docs/react/guides/strings)
* Aprende sobre cadenas compartidas con la función [`msg`](/docs/react/api/strings/msg): [Guía de cadenas compartidas](/docs/react/guides/shared-strings)