Comprendre le Mode JSX Preserve dans React

Le JSX est un préprocesseur de syntaxe utilisé dans React qui permet d'écrire des balises HTML dans le code JavaScript de manière pratique et intuitive. La question porte spécifiquement sur les modes de JSX qui peuvent être utilisés lors de la transformation du JSX en code JavaScript brut.

Le mode "preserve" est un de ces modes. Quand il est activé, le JSX est conservé dans la sortie et doit être consommé par une autre étape de transformation pour être utilisable. Ceci est réussi en laissant les expressions JSX intactes, pour qu'elles puissent être traitées par des outils tels que Babel. Ce mode est spécifique à TypeScript, et il est activé en définissant le paramètre de "jsx" à "preserve" dans votre fichier de configuration tsconfig.json.

Voici un exemple de la façon dont cela fonctionnerait:

Prenez le suivant code TypeScript/JSX:

let element = <h1>Bonjour, monde!</h1>;

Si nous utilisons l'option "preserve", la sortie sera:

var element = <h1>Bonjour, monde!</h1>;

Notez que le code JSX est resté intact.

En comparaison, si nous utilisions un autre mode, comme "react", la sortie peut ressembler à ce qui suit:

var element = React.createElement("h1", null, "Bonjour, monde!");

Cependant, c'est une affirmation incorrecte dans la question, indiquant que le mode "react" génère "React.addElement". En fait, il génère "React.createElement".

En résumé, utiliser le mode "preserve" peut être utile lorsque vous voulez une sortie qui peut être consommée par une autre étape de transformation. Cependant, c'est une étape supplémentaire que vous devez prendre en compte lors de la configuration de votre flux de travail, et il est important de comprendre comment cela pourrait affecter le reste de votre processus de développement.