JSX & Composants

L'unité de base de tout UI React

Section 1

JSX — JavaScript + XML

Step 1

Ce qu'est vraiment JSX

JSX n'est pas du HTML. C'est du JavaScript qui ressemble à du HTML. Il est transpilé en appels React.createElement() par Babel/SWC. Chaque expression JSX retourne un objet.

Counter.jsx

jsx

1// Ce que tu écris
2function Counter({ count }) {
3  return (
4    <div className="counter">
5      <span>Compteur : {count}</span>
6    </div>
7  );
8}
9
10// Ce que Babel produit
11function Counter({ count }) {
12  return React.createElement(
13    "div",
14    { className: "counter" },
15    React.createElement("span", null, "Compteur : ", count)
16  );
17}

Step 2

Règles JSX

JSX a quelques règles importantes qui diffèrent du HTML.

Counter.jsx

jsx

1// Ce que tu écris
2function Counter({ count }) {
3  return (
4    <div className="counter">
5      <span>Compteur : {count}</span>
6    </div>
7  );
8}
9
10// Ce que Babel produit
11function Counter({ count }) {
12  return React.createElement(
13    "div",
14    { className: "counter" },
15    React.createElement("span", null, "Compteur : ", count)
16  );
17}

Section 2

Composants et Props

Step 3

Composant fonctionnel

Un composant React est une fonction qui reçoit des props et retourne du JSX. C'est tout. La convention : nom en PascalCase.

Step 4

La prop children

children est une prop spéciale qui reçoit le contenu entre les balises ouvrante et fermante. Essentielle pour les composants de layout et de composition.

Counter.jsx

jsx

1// Ce que tu écris
2function Counter({ count }) {
3  return (
4    <div className="counter">
5      <span>Compteur : {count}</span>
6    </div>
7  );
8}
9
10// Ce que Babel produit
11function Counter({ count }) {
12  return React.createElement(
13    "div",
14    { className: "counter" },
15    React.createElement("span", null, "Compteur : ", count)
16  );
17}

Topics and skills covered

React
JSX
Composants
Props

useState et useEffect — les hooks fondamentaux

Ch.1