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

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}


## Introducción

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

Ofrece un conjunto completo de herramientas para internacionalizar tu aplicación de React Native de forma sencilla y fácil de mantener, con paridad de funciones respecto a otras bibliotecas de i18n populares.

El SDK puede usarse de forma autónoma 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 funciones avanzadas:

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

## Conceptos

Hay 5 conceptos principales que debes entender sobre el SDK.

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

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

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

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

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

## El componente `<GTProvider>`

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

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

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-native/api/components/gtprovider) para obtener más información.


## El componente `<T>`

El componente [`<T>`](/docs/react-native/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 su contenido en un idioma compatible.

<Callout type="info">
  Recomendamos usar el componente [`<T>`](/docs/react-native/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-native/api/components/t) puede usarse para traducir contenido HTML, lo que lo hace mucho más potente 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-native/api/components/t) funciona con [componentes de variable](/docs/react-native/guides/variables) como [`<Num>`](/docs/react-native/api/components/num), [`<DateTime>`](/docs/react-native/api/components/datetime) y [`<Currency>`](/docs/react-native/api/components/currency) para dar formato a contenido dinámico.

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


## El hook `useGT`

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

Este 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-native/api/components/t), el hook [`useGT`](/docs/react-native/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, usar un componente [`<T>`](/docs/react-native/api/components/t) sería más difícil.

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

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

## La función `msg`

La función [`msg`](/docs/react-native/api/strings/msg) se usa para marcar cadenas para traducir 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 aparece en varias partes de tu aplicación.

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

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-native';

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-native/api/strings/msg) codifica cadenas con metadatos de traducción, y [`useMessages`](/docs/react-native/api/strings/use-messages) las descodifica.

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

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


## El hook `useTranslations`

El hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) es un hook de React que devuelve una función que se puede usar para obtener traducciones 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-native/api/dictionary/use-translations) en tu aplicación. Usar con frecuencia el hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) hará que tu base de código sea más difícil de mantener
  y generará una gran deuda técnica.

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

  Si estás migrando desde otra biblioteca de i18n, el hook [`useTranslations`](/docs/react-native/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-native/guides/dictionaries) para saber más sobre el hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations).

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

***


## Siguientes pasos

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