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

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


## Introducción

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

Proporciona un amplio conjunto de herramientas para internacionalizar tu aplicación React Native de forma sencilla y mantenible, con las mismas funcionalidades que otras bibliotecas de i18n populares.

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

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

* Recarga en caliente de las 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-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 de tu aplicación, incluido 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 provider 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 renderizar automáticamente el contenido del elemento en uno de los idiomas compatibles.

<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>¡Hola, mundo!</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 al contenido dinámico.

Consulta la [guía del componente `<T>`](/docs/react-native/guides/t) para obtener más información sobre 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), aunque con ciertas limitaciones.

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, sería más difícil usar un componente [`<T>`](/docs/react-native/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-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 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 aparece en varios lugares de tu aplicación.

```tsx
// Marcar cadenas para su 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 decodifica.

<Callout type="info">
  Usa [`msg`](/docs/react-native/api/strings/msg) para el contenido compartido que deba traducirse de forma coherente en toda tu aplicación. Para el 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 puede usarse 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-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 deuda técnica considerable.

  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 gradual.
</Callout>

Consulta la guía de [diccionarios](/docs/react-native/guides/dictionaries) para obtener más información 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: [Inicio rápido](/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 sobre cadenas compartidas con la función [`msg`](/docs/react-native/api/strings/msg): [Guía de cadenas compartidas](/docs/react-native/guides/shared-strings)