# react-native: Format de données JSX de GT
URL: https://generaltranslation.com/fr/docs/react-native/reference/gt-jsx.mdx
---
title: Format de données JSX de GT
description: Référence du format de données JSX minifié de General Translation
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}

Le format de données JSX de GT est un format minifié utilisé par les bibliothèques General Translation pour représenter l’interface utilisateur traduite de votre application React.


## Introduction : arbres JSX

React représente les arbres JSX sous forme d’objets ayant la structure suivante :

```ts
type Element = {
    type: string;
    props: {
        children: JSXTree[] | JSXTree;
        // ...autres props
    };
    // ...autres attributs
};
type JSXTree = Element | string;
```

GT JSX est une version compressée de cette structure d’arbre JSX, utilisée par les bibliothèques General Translation pour représenter l’interface utilisateur traduite dans votre application React.


## Référence

```ts
type Element = {
    t?: string; // nom de la balise
    c?: (Element | Variable | string)[]; // enfant
    i?: number; // ID GT of the element
    d?: {
        b?: Record<string, Element | Variable | string>; // branches
        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"; // type
    i?: number; // ID GT
}
type GTJSXTree = Element | Variable | string | (Element | Variable | string)[];
```

## GT JSX: Chaînes

La forme la plus simple de GT JSX est une chaîne, qui représente un texte statique.

Par exemple :

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

S’écrirait en GT JSX comme suit :

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

Les tableaux de chaînes sont également pris en charge en GT JSX :

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


## GT JSX: Éléments

GT représente les types JSX `Element` de deux manières.

### Variables

Le premier est une variable, c’est-à-dire un objet simple qui contient une clé et, éventuellement, un type. Il sert à représenter des variables qui peuvent changer à l’exécution.

```ts
type Variable = {
    k: string; // `k` représente la clé, le nom de la variable
    v?: ( // représente le type de la variable, si omis, supposé être `v`
        "v" | // `v`, une variable générique
        "n" | // `n`, une variable numérique
        "c" | // `c`, une variable monétaire
        "d" | // `d`, une variable date/heure
        "rt" // `rt`, une variable de temps relatif
    );
    i?: number; // ID GT de la variable
}
```


#### Exemple 1 : Var

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

S’écrirait en GT JSX comme suit :

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

<Callout type="info">
  Les variables sans prop `name` se voient attribuer des noms internes uniques en fonction de leur ID GT
</Callout>

#### Exemple 2 : Num

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

Se représenterait en GT JSX comme suit :

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


#### Exemple 3 : Avec la propriété name

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

S’écrirait en GT JSX comme :

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


### Éléments

Les éléments qui ne sont pas des variables sont représentés par la structure de données suivante :

<Callout type="info">
  Notez que tous ces attributs sont facultatifs.
  Un objet vide représenterait un élément traduit à la même position que son équivalent d’origine, sans contenu traduisible parmi ses descendants.
  **En pratique, `i` est toujours inclus.**
</Callout>

```ts
type Element = {
    t?: string; // nom de la balise
    c?: GTJSXTree | GTJSXTree[]; // enfants
    i?: number; // ID GT de l'élément
    d?: { // prop data-_gt
        b?: Record<string, GTJSXTree | GTJSXTree[]>; // branches
        t?: "p" | "b"; // type de transformation de branche (pluriel ou branche)
        pl?: string; // placeholder
        ti?: string; // titre
        alt?: string; // alt
        arl?: string; // aria-label
        arb?: string; // aria-labelledby
        ard?: string; // aria-describedby
        s?: Record<string, string>; // style
    }
}
```


#### Exemple 1 : balises simples

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

S’écrirait en GT JSX comme suit :

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


#### Exemple 2 : imbriqué, avec des variables

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

Se représenterait en GT JSX comme suit :

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


#### Exemple 3 : Au pluriel

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

S’écrirait en GT JSX comme suit :

```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 // noter que le même ID est utilisé pour les branches parallèles
            }
        }
    }
}
```


### Type de GTJSX

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


## IDs GT

Les IDs GT sont attribués aux éléments et aux variables d’un arbre JSX par parcours en profondeur, de façon séquentielle, à partir de 1.

Lorsqu’il y a des composants de branchement comme `<Branch>` ou `<Plural>`, les mêmes IDs GT sont attribués aux branches parallèles. Ainsi, s’il y a plus de branches dans une langue que dans une autre (par exemple dans les langues qui ont davantage de formes du pluriel), il reste possible de créer des éléments avec les bonnes props et la logique appropriée.

## Fichiers JSON JSX de GT

Chaque arbre JSX représente les enfants d’un composant `<T>`.
Les composants sont regroupés dans des fichiers JSON de traduction.
Le type de l’objet JSON stocké dans ces fichiers correspond à :

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

Où `key` est soit défini par l’utilisateur, soit le hachage du `GTJSXTree` dans la langue d’origine,
et `GTJSXTree` est le type de l’arbre JSX de GT décrit ci-dessus.


### Exemple complet

Le JSX tel qu’écrit :

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

Serait représenté par l’arbre JSX suivant :

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

Cela serait minifié en GT JSX comme ceci :

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

Une fois traduit en espagnol, le JSX de GT serait :

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

Il serait stocké dans un fichier comme celui-ci :

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

<Callout type="info">`abc123` est le hachage de l’arbre JSX GT anglais d’origine, et non de la traduction espagnole.</Callout>

Lorsque la traduction espagnole est réconciliée avec l’arbre JSX d’origine, on obtient le résultat suivant :

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

Qui peut ensuite être affiché dans l’interface utilisateur prévue :

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

### Hachages

Algorithme de hachage, longueur du hachage à déterminer

### Éviter les hachages à l’exécution

Pour éviter de calculer des hachages à l’exécution, les bibliothèques proposent un mécanisme de secours facultatif permettant à l’utilisateur de spécifier un ID.

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

Si l’ID est présent dans le fichier JSON de traduction, il sera utilisé à la place du hachage.

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