Chapitre 2 : JSX et composants

Le JSX, Les composants

Concepts clés abordés

• Le JSX
• Les composants

Le JSX - JavaScript XML

JSX est une syntaxe utilisée par React qui permet d’écrire une interface utilisateur de manière proche du HTML, directement dans du JavaScript. Mais attention, ce n’est pas du HTML : c’est une syntaxe qui sera transformée en JavaScript par l’outil de build.
Avec JSX, on décrit à quoi l’interface doit ressembler, et non comment la construire.

Liens:
https://react.dev/learn/writing-markup-with-jsx

Les composants en React

Un composant React est une fonction JavaScript qui retourne du JSX., et qui représente une partie plus ou moins grande de l’interface.

Chaque composant :

• a un nom qui commence par une majuscule
• représente une partie de l’interface
• peut être réutilisé

Les composants permettent de découper l’interface en petites briques indépendantes, et c’est un grand principe de React. Cela permet de construire des interfaces complexes à partir de petits composants simples (diviser pour mieux régner), c’est ce qu’on appelle la composition de composants.

Liens:
https://18.react.dev/learn/your-first-component#components-ui-building-blocks

Questions clés (validation des acquis du chapitre)

• Qu’est-ce que le JSX ? Syntaxe utilisée par React qui permet d’écrire une interface utilisateur de manière proche du HTML
• Quelle est la différence entre JSX et HTML ? Les 2 se ressemblent, mais le JSX est transformé en interne en objets Javascript simples.
• Quelle est l’idée principale derrière le concept de composants ? Cela permet de décomposer l’interface en briques indépendantes et plus simple : diviser pour mieux régner.

Exercices :

Utiliser Vite pour booter une application : https://vite.dev/guide/

Exercice 1 - Créer un composant simple

1. Créer un composant Title
2. Créer un composant Content

Exercice 2 - Créer un composant plus complexe

1. Créer un composant Article
2. Un article est composé d’un titre et d’un contenu