Chap 2 : Composants et JSX
Objectif : Apprendre à créer et utiliser des composants en React, découvrir le concept de
JSX, et comprendre comment assembler des interfaces dynamiques et réutilisables.
1. Comprendre le concept de composants
Un composant en React est une fonction ou une classe qui retourne des éléments
d’interface (du JSX, une syntaxe qui ressemble au HTML). React assemble ces composants
pour créer une interface utilisateur dynamique.
Chaque composant est :
● Réutilisable : Vous pouvez le réutiliser dans différentes parties de votre application.
● Encapsulé : Il peut contenir sa propre logique, état et style, séparé des autres
composants.
● Modulaire : Chaque composant remplit une fonction spécifique, ce qui rend
l’application plus facile à comprendre et à maintenir.
Exemples de composants de base
1. Composant fonctionnel simple :
function Greeting() {
return <h1>Bonjour tout le monde !</h1>;
}
Ce composant retourne une balise <h1> avec du texte, "Bonjour tout le monde !". Il est
simple, n’a pas d’état, et ne prend pas de propriétés (props).
2 . Composant qui prend des props :
function UserGreeting(props) {
return <h1>Bonjour, {[Link]} !</h1>;
Dans cet exemple, UserGreeting est un composant fonctionnel qui prend un argument
props et utilise [Link] pour afficher un nom. Nous pouvons l'appeler dans un autre
composant pour passer une valeur :
function App() {
return <UserGreeting name="Yannick" />;
Ici, UserGreeting affichera "Bonjour, Yannick !" dans une balise <h1>.
2. Introduction au JSX
JSX (JavaScript XML) est une extension de syntaxe pour JavaScript, qui ressemble au
HTML mais fonctionne à l’intérieur du JavaScript.
Pourquoi JSX ?
JSX permet d’écrire plus facilement des éléments d’interface directement dans le code
JavaScript, ce qui rend le code plus lisible et plus proche de la structure finale d’une page
HTML.
Syntaxe de base du JSX
1. Syntaxe HTML dans du JavaScript :
function HelloWorld() {
return <h1>Hello, World!</h1>;
2. Expressions JavaScript dans JSX : Les expressions JavaScript peuvent être
intégrées dans JSX avec des accolades {} :
function UserAge() {
const age = 25;
return <p>Votre âge est {age} ans.</p>;
3. Expressions conditionnelles dans JSX : Pour des rendus conditionnels, vous pouvez
utiliser des expressions ternaires ou des conditions if.
function WelcomeMessage(props) {
return (
<div>
{[Link] ? <p>Bienvenue, {[Link]} !</p> : <p>Veuillez vous
connecter.</p>}
</div>
);
3. Créer des composants simples en React
Un composant peut être défini de plusieurs manières selon le besoin :
Composant fonctionnel simple
Un composant fonctionnel est une fonction JavaScript qui retourne du JSX. Par défaut,
React privilégie les composants fonctionnels car ils sont plus légers et permettent d’utiliser
les Hooks.
function WelcomeMessage() {
return <h1>Bienvenue dans notre application !</h1>;
Composant fonctionnel avec props
Les props sont des paramètres passés aux composants pour leur fournir des données.
function UserCard(props) {
return (
<div>
<h2>{[Link]}</h2>
<p>Âge : {[Link]}</p>
</div>
);
}
// Utilisation dans un autre composant
function App() {
return (
<div>
<UserCard name="Yannick" age={30} />
<UserCard name="Alice" age={25} />
</div>
);
Ici, chaque UserCard reçoit un name et un age et les affiche.
Afficher plusieurs éléments avec JSX
Vous pouvez aussi créer des listes d’éléments en utilisant la méthode map de JavaScript sur
des tableaux.
function FriendList() {
const friends = ["Alice", "Bob", "Charlie"];
return (
<ul>
{[Link]((friend) => (
<li key={friend}>{friend}</li>
))}
</ul>
);
● Ce composant FriendList affiche une liste d'amis en itérant sur le tableau
friends et en utilisant la méthode map pour générer un <li> pour chaque ami.
4. Rendre les composants dans l'application
Pour rendre un composant, on l’appelle dans un composant principal (souvent App) puis on
utilise [Link] pour l'afficher dans le DOM.
1. Exemple d'application avec plusieurs composants :
import React from 'react';
import ReactDOM from 'react-dom';
function Greeting() {
return <h1>Bonjour tout le monde !</h1>;
function App() {
return (
<div>
<Greeting />
</div>
);
[Link](<App />, [Link]('root'));