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

{/* GENERADO AUTOMÁTICAMENTE: No edites este archivo directamente. 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.

Ofrece un conjunto completo de herramientas para internacionalizar tu aplicación de React de forma sencilla y fácil de mantener, con una funcionalidad equiparable a la de otras bibliotecas de i18n populares.

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

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

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

## Conceptos

Hay 5 conceptos principales del SDK que debes entender.

<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 contexto de traducción a 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 provider debe envolver toda tu aplicación y colocarse tan arriba como sea posible en el árbol de componentes, por ejemplo, en el componente raíz `App`.

Consulta la referencia de la API de [`GTProvider`](/docs/react/api/components/gtprovider) para 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 uno de los idiomas compatibles.

<Callout type="info">
  Recomendamos usar el componente [`<T>`](/docs/react/api/components/t) siempre que sea posible, ya que ofrece la máxima 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 a contenido dinámico.

Consulta la [guía del componente `<T>`](/docs/react/guides/t) para conocer las distintas 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 se puede usar de forma similar al componente [`<T>`](/docs/react/api/components/t), aunque con ciertas concesiones.

El hook devuelve una función que se puede usar 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 [cadenas](/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 cadenas para su traducción 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 varias partes de tu aplicación.

```tsx
// Marcar cadenas para 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 el contenido compartido que deba traducirse de forma coherente en toda la aplicación. Para contenido específico de un componente, usa preferiblemente [`<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 saber más 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 para obtener traducciones a partir de una clave determinada.

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

```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 el hook [`useTranslations`](/docs/react/api/dictionary/use-translations) con frecuencia 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 incremental.
</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: [Guía de 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 a usar cadenas compartidas con la función [`msg`](/docs/react/api/strings/msg): [Guía de cadenas compartidas](/docs/react/guides/shared-strings)