Réagir JSX

Qu'est-ce que JSX ?

JSX signifie JavaScript XML.

JSX nous permet d'écrire du HTML dans React.

JSX facilite l'écriture et l'ajout de HTML dans React.

Codage JSX

JSX nous permet d'écrire des éléments HTML en JavaScript et de les placer dans le DOM sans aucune createElement()  et/ou appendChild()méthode.

JSX convertit les balises HTML en éléments de réaction.

Voici deux exemples. Le premier utilise JSX et le second non :

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Comme vous pouvez le voir dans le premier exemple, JSX nous permet d'écrire du HTML directement dans le code JavaScript.

JSX est une extension du langage JavaScript basé sur ES6 et est traduit en JavaScript normal au moment de l'exécution.

Expressions dans JSX

Avec JSX, vous pouvez écrire des expressions à l'intérieur d'accolades { }.

L'expression peut être une variable ou une propriété React, ou toute autre expression JavaScript valide. JSX exécutera l'expression et renverra le résultat :

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Insertion d'un gros bloc de HTML

Pour écrire du HTML sur plusieurs lignes, mettez le HTML entre parenthèses :

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Un élément de niveau supérieur

Le code HTML doit être encapsulé dans UN élément de niveau supérieur.

Donc, si vous aimez écrire deux paragraphes, vous devez les mettre à l'intérieur d'un élément parent, comme un divélément.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternativement, vous pouvez utiliser un "fragment" pour envelopper plusieurs lignes. Cela évitera d'ajouter inutilement des nœuds supplémentaires au DOM.

Un fragment ressemble à une balise HTML vide : <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Les éléments doivent être fermés

JSX suit les règles XML et, par conséquent, les éléments HTML doivent être correctement fermés.

const myelement = <input type="text" />;

Attribut classe = className

L' classattribut est un attribut très utilisé en HTML, mais comme JSX est rendu en JavaScript et que le classmot-clé est un mot réservé en JavaScript, vous n'êtes pas autorisé à l'utiliser dans JSX.

JSX a résolu ce problème en utilisant à la classNameplace. Lorsque JSX est rendu, il traduit className les attributs en classattributs.

const myelement = <h1 className="myclass">Hello World</h1>;

Conditions - si les déclarations

React prend en charge les ifinstructions, mais pas dans JSX.

Pour pouvoir utiliser des instructions conditionnelles dans JSX, vous devez placer les if instructions en dehors de JSX, ou vous pouvez utiliser une expression ternaire à la place :

Option 1:

Écrivez ifdes instructions en dehors du code JSX :

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Option 2:

Utilisez plutôt des expressions ternaires :

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));