# gt-react: General Translation React SDK: Formato de datos de GT JSX
URL: https://generaltranslation.com/es/docs/react/reference/gt-jsx.mdx
---
title: Formato de datos de GT JSX
description: Referencia del 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 utilizan 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 de JSX que utilizan 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 válidos como GT JSX:

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


## GT JSX: Elementos

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

### Variables

El primero 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 según 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 nombre

```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 se incluye.**
</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)[];
```


## IDs de GT

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

Cuando hay componentes de rama como `<Branch>` o `<Plural>`, se asignan los mismos IDs de GT a las ramas paralelas. Esto permite que, si en un idioma hay más ramas que en otro (por ejemplo, en idiomas con más formas plurales), se puedan seguir creando 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 juntos 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` la define el usuario o es el hash del `GTJSXTree` del idioma original,
y `GTJSXTree` es el tipo del árbol de GT JSX descrito anteriormente.


### Ejemplo completo

El JSX quedaría así:

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

Se representaría en el siguiente árbol JSX:

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

Esto se minificaría como GT JSX:

```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 hace coincidir con el árbol JSX original, se produciría 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 y 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 usará en lugar del hash.

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