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

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

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


## Introducción: árboles JSX

React representa los árboles de 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 compacta de esta estructura de árbol JSX que usan las bibliotecas de General Translation para representar la interfaz de usuario traducida en tu aplicación de React.


## Referencia

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: (Element | Variable | string)[]; // contenido
    i?: number; // ID de GT of the element
    d?: {
        b?: Record<string, Element | Variable | string>; // rama
        t?: "p" | "b"; // branch transformation type (plural or Branch)
        pl?: string; // placeholder
        ti?: string; // title
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    };
}
type Variable = {
    k: string; // key
    v?: "v" | "n" | "c" | "d" | "rt"; // tipo
    i?: number; // ID de GT
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```


## GT JSX: Cadenas

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

Por ejemplo:

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

Se representaría en GT JSX de la siguiente manera:

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

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

```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 simple que contiene una clave y un tipo opcional. Se usa para representar variables que pueden cambiar en runtime.

```ts
type Variable = {
    k: string; // `k` represents key, the name of the variable
    v?: ( // represents the type of the variable, if left out is assumed as `v`
        "v" | // `v`, a generic variable
        "n" | // `n`, a number variable
        "c" | // `c`, a currency variable
        "d" | // `d`, una variable de fecha y hora
        "rt" // `rt`, una variable de tiempo relativo
    );
    i?: number; // ID de GT of the variable
}
```


#### Ejemplo 1: Var

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

Se representaría en GT JSX como:

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

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


#### Ejemplo 2: Num

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

Se representaría así en GT JSX:

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


#### Ejemplo 3: Con la propiedad name

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

Se representaría en GT JSX así:

```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 se incluye.**
</Callout>

```ts
type Element = {
    t?: string; // nombre de etiqueta
    c?: GTJSXTree | GTJSXTree[]; // hijos
    i?: number; // ID de GT del elemento
    d?: { // propiedad 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 simples

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

Se representa en GT JSX así:

```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 así:

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


#### Ejemplo 3: Con pluralización

```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 de la siguiente manera:

```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: se usa el mismo ID para ramas paralelas
            }
        }
    }
}
```


### Tipo GTJSX

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


## IDs de GT

Los IDs de GT se asignan a los elementos y las variables de un árbol JSX mediante un recorrido en profundidad y de forma secuencial, a partir de 1.

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

## Archivos JSON JSX de GT

Cada árbol JSX representa los hijos 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 bien es el hash del `GTJSXTree` del idioma original,
y `GTJSXTree` es el tipo del árbol GT JSX descrito anteriormente.


### Ejemplo completo

El JSX tal como se escribe:

```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 se minificaría a 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 sincronice con el árbol JSX original, se producirá lo siguiente:

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

Que luego puede mostrarse como la interfaz de usuario deseada:

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


### Hashes

Algoritmo de hash, longitud del hash por definir

### Evitar hashes en runtime

Para evitar calcular hashes en runtime, las bibliotecas ofrecen un mecanismo alternativo opcional mediante el cual el usuario puede especificar un ID.

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

Si el ID está presente en el archivo JSON de traducciones, se usará en lugar del hash.

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