# react-native: Formato de datos de GT JSX
URL: https://generaltranslation.com/es/docs/react-native/reference/gt-jsx.mdx
---
title: Formato de datos de GT JSX
description: Referencia sobre el formato de datos JSX minificado de General Translation
---

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

El formato de datos GT JSX es un formato de datos minificado que usan las bibliotecas de General Translation para representar la interfaz de usuario traducida en tu aplicación React.


## Introducción: árboles JSX

React representa los árboles JSX como objetos con la siguiente estructura:

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...otras props
    };
    // ...otros atributos
};
type JSXTree = Element | string;
```

GT JSX es una versión comprimida de esta estructura de árbol JSX que usan las bibliotecas de General Translation para representar la interfaz de usuario traducida en tu aplicación React.


## Referencia

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: (Element | Variable | string)[]; // elemento hijo
    i?: number; // ID de GT del elemento
    d?: {
        b?: Record<string, Element | Variable | string>; // ramas
        t?: "p" | "b"; // tipo de transformación de rama (plural o rama)
        pl?: string; // marcador de posición
        ti?: string; // título
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // estilo
    };
}
type Variable = {
    k: string; // clave
    v?: "v" | "n" | "c" | "d"; // tipo
    i?: number; // ID de GT
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## GT JSX: cadena

La forma más sencilla de GT JSX es una cadena, que representa un texto estático.

Por ejemplo:

```jsx
<T>Hello, world!</T>
```

se representaría en GT JSX:

```ts
"Hello, world!"
```

Los arrays de cadenas también son GT JSX válidos:

```ts
["Hello, ", "world!"]
```


## GT JSX: Elementos

GT representa los tipos `Element` de JSX de dos formas posibles.

### Variables

La primera es una variable, un objeto sencillo que contiene una clave y un tipo opcional. Se usa para representar variables que pueden cambiar en tiempo de ejecución.

```ts
type Variable = {
    k: string; // `k` representa la clave, el nombre de la variable
    v?: ( // representa el tipo de la variable; si se omite, se asume como `v`
        "v" | // `v`, una variable genérica
        "n" | // `n`, una variable numérica
        "c" | // `c`, una variable de moneda
        "d" // `d`, una variable de fecha y hora
    );
    i?: number; // ID de GT de la variable
}
```


#### Ejemplo 1: Var

```jsx
<T>Hello, <Var>{name}</Var>!</T>
```

se representaría en GT JSX:

```ts
["Hello, ", { k: "_gt_var_1", i: 1 }, "!"]
```

<Callout type="info">
  A las variables sin la prop name se les asignan nombres internos únicos en función de su ID de GT
</Callout>


#### Ejemplo 2: Num

```jsx
<T>The count is <Num>{count}</Num></T>
```

se representaría en GT JSX:

```ts
["The count is ", { k: "count", v: "n", i: 1 }]
```


#### Ejemplo 3: Con la prop name

```jsx
<T>This product costs <Currency name="cost">{amount}</Currency></T>
```

se representaría en GT JSX:

```ts
["This product costs ", { k: "cost", v: "c", i: 1 }]
```


### Elementos

Los elementos que no son variables se representan con la siguiente estructura de datos:

<Callout type="info">
  Ten en cuenta que todos estos atributos son opcionales.
  Un objeto vacío representaría un elemento traducido en la misma posición que su equivalente original, sin contenido traducible entre sus descendientes.
  **En la práctica, `i` siempre está incluido.**
</Callout>

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: GTJSXTree | GTJSXTree[]; // elemento hijo
    i?: number; // ID de GT del elemento
    d?: { // prop data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // ramas
        t?: "p" | "b"; // tipo de transformación de rama (plural o rama)
        pl?: string; // marcador de posición
        ti?: string; // título
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // estilo
    }
}
```


#### Ejemplo 1: Etiquetas sencillas

```jsx
<T>Hello, <b>world</b>!</T>
```

se representaría en GT JSX:

```ts
["Hello, ", { c: "world", i: 1 }, "!"]
```


#### Ejemplo 2: Anidado, con variables

```jsx
<T><b>Hello</b>, my name is <i><Var>{name}</Var></i></T>
```

se representaría en GT JSX:

```ts
[
    { t: "b", c: "Hello", i: 1 },
    ", my name is ",
    { 
        t: "i",
        c: { k: "_gt_var_3", i: 3 }, 
        i: 2 
    }
]
```


#### Ejemplo 3: con Plural

```jsx
<T>
    <Plural 
        n={count} 
        one={<>I have <Num>{count}</Num> item</>} 
        other={<>I have <Num>{count}</Num> items</>}
    />
</T>
```

se representaría en GT JSX:

```ts
{ 
    i: 1,
    d: {
        t: "p",
        b: {
            one: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "item"],
                i: 2 
            },
            other: {
                c: ["I have", { k: "_gt_num_4", v: "n", i: 3 }, "items"],
                i: 2 // nota: el mismo ID se usa para ramas paralelas
            }
        }
    }
}
```


### Tipo GTJSX

```ts
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## ID de GT

Los ID de GT se asignan a elementos y variables de un árbol JSX mediante un recorrido en profundidad y de forma secuencial, empezando por 1.

Cuando hay componentes de rama como `<Branch>` o `<Plural>`, se asignan los mismos ID de GT a las ramas paralelas. Esto permite que, si un idioma tiene más ramas que otro (por ejemplo, idiomas con más formas de plural), se sigan pudiendo crear elementos con las props y la lógica correctas.

## Archivos JSON de GT JSX

Cada árbol JSX representa los elementos hijo de un componente `<T>`.
Los componentes se almacenan conjuntamente en archivos JSON de traducción.
El tipo del objeto JSON almacenado en estos archivos corresponde a:

```ts
type GTJSXFile = {
    [key: string]: GTJSXTree;
}
```

Donde `key` lo define el usuario o es el hash del `GTJSXTree` del idioma original,
y `GTJSXTree` es el tipo del árbol GT JSX descrito anteriormente.


### Ejemplo completo

El JSX resultante:

```jsx
<T>
    <b>Alice's</b> happy <i>customer</i>
</T>
```

Se representaría con el siguiente árbol JSX:

```ts
[
    {
        type: "b",
        "props": {
            "children": "Alice's"
        }
    },
    " happy ",
    {
        type: "i",
        "props": {
            "children": "customer"
        }
    }
]
```

Esto quedaría minificado en GT JSX así:

```ts
[{ t: "b", c: "Alice's", i: 1 }, " happy ", { t: "i", c: "customer", i: 2 }]
```

Traducido al español, el GT JSX sería:

```ts
[{ c: "El cliente", i: 2 }, " feliz ", { c: "de Alice", i: 1 }]
```

Se almacenaría en un archivo con este aspecto:

```json
{ "abc123": [{ "c": "El cliente", "i": 2 }, " feliz ", { "c": "de Alice", "i": 1 }] }
```

<Callout type="info">`abc123` es el hash del árbol GT JSX original en inglés, no de la traducción al español.</Callout>

Cuando la traducción al español se reconcilia con el árbol JSX original, se obtiene lo siguiente:

```ts
[
    {
        type: "i",
        "props": {
            "children": "El cliente"
        }
    },
    " feliz ",
    {
        type: "b",
        "props": {
            "children": "de Alice"
        }
    }
]
```

Que luego puede mostrarse en la interfaz de usuario esperada:

```jsx
<><i>El cliente</i> feliz <b>de Alice</b></>
```


### Hashes

Algoritmo de hash; longitud del hash por definir

### Evitar hashes en tiempo de ejecución

Para evitar calcular hashes en tiempo de ejecución, las bibliotecas incluyen un mecanismo opcional de alternativa que permite al usuario especificar un ID.

```jsx
<T id="example">
    Hello, world
</T>
```

Si el ID está presente en el archivo JSON de traducción, se utilizará en lugar del hash.

```json
{ "example": "Hello, world" }
```