Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

5.1. Un composant en React

Nous allons donner la définition la plus simple possible d’un composant React. Un composant est une boîte noire qui reçoit des arguments en entrée, appelés des props, et retourne du DOM virtuel en sortie. Voici un schéma extraordinaire, qui résume ceci :

Fonctionnement de base d'un composant React
Présentation du fonctionnement de base d’un composant React.

A gauche, vous avez les props du composant. C’est un objet qui contient les valeurs dont le composant a besoin pour fonctionner. Par exemple dans notre cas, notre composant attend en entrée le prénom d’une personne, et ensuite salue cette personne. Si nous ne passons aucun prénom au composant, celui-ci ne peux rien faire. Par contre, il est tout à fait possible qu’un composant n’ai besoin d’aucune « props » pour pouvoir fonctionner correctement.

A droite, nous avons notre DOM virtuel, coder avec la syntaxe JSX que nous verrons juste après. Le code ressemble à du code HTML classique, et c’est bien le problème, car ce n’est pas du HTML mais du JSX ! La syntaxe {name} permet d’exécuter du code JavaScript dans notre DOM virtuel, en affichant la valeur de la variable name.

Une fois que vous aurez développé plusieurs composants qui s’occupent chacun d’une portion de DOM virtuel de votre application, ces composants constituerons une application complexe. Simple, mais efficace. 👍