Module 1Les bases de React
Chapitre 4 sur 18
Écrire du JSX, ses attributs et son style, les expressions JavaScript, les listes avec map et key, les composants fonction et classe, les règles d'écriture, et le TP des cartes de produits.
Objectifs
Avec ce chapitre, tu sauras…
React.createElement() ;id, className, style={{ }} ;map et key ;Fragment, parenthèses, commentaires, ternaire.Leçon 1
Écrire les éléments React avec React.createElement() est long et difficile à lire. Les concepteurs de React ont donc choisi JSX (JavaScript eXtension) : une façon d'écrire les éléments React qui ressemble au HTML.
Deux règles de base pour les balises :
| La balise commence par… | Elle désigne… | Exemple |
|---|---|---|
| une minuscule | un élément HTML, déclaré par React DOM (erreur si la balise n'existe pas) | <div>, <span>, <label> |
| une majuscule | un composant, qui doit être déclaré dans le fichier ou importé | <Greetings>, <App> |
Leçon 2
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Leçon 3
Leçon 4
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Leçon 5
Vidéo · À regarder
FRApprendre le JavaScript : Les classes
Grafikart · YouTube
Leçon 6
Leçon 7
Leçon 8
Vidéo · À regarder
FRApprendre React de Zéro (Cours complet pour débutants)
Louis D · YouTube
1JSX signifie…
2En JSX, l'attribut class s'écrit…
3Quelle écriture du style est correcte ?
4background-color s'écrit dans un style JSX…
5Une balise qui commence par une majuscule est…
6L'attribut à donner à chaque élément d'une liste est…
7Comment commenter dans le JSX ?
8Pour renvoyer plusieurs éléments sans ajouter de div, on utilise…
9Dans un composant classe, les attributs se lisent avec…
10Pour ne rien afficher dans un ternaire, on renvoie…
L'essentiel du chapitre
React.createElement() ; Babel dans le navigateur (type="text/babel") = développement seulement.id, className, style={{ propriete: "valeur" }} (camelCase).{ expression } ; listes : tableau.map((x, i) => <li key={...}>{x}</li>) avec une key unique.function Nom(props) { return <…/> } ou ({a, b}) ; composant classe : class Nom extends React.Component { render() { … this.props … } } (fonction fléchée dans map pour garder this).div ou <React.Fragment> / <>), parenthèses après return, commentaires {/* */}, ternaire {cond ? a : null}.var p = <p>Hello React</p>; // Code JSXLe navigateur ne comprend pas le JSX. L'outil Babel le traduit en JavaScript pur. Voici la page HTML qui charge React, ReactDOM et Babel :
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
var p = <p>Hello React</p>; // Code JSX
console.log(p); // Affichage dans la console de l'élément React
ReactDOM.render(p, document.getElementById("app"));
</script>
</html><script src=".../babel.min.js"> charge l'interpréteur qui traduit le JSX ;type="text/babel" indique à Babel quel code traduire ;ReactDOM.render(élément, conteneur) insère l'élément React dans la page.L'onglet React (Components) des outils de développement montre l'élément créé.
Traduire le JSX dans le navigateur ralentit le programme. Cette méthode sert uniquement en développement. Pour la mise en production, on utilise un outil comme Webpack (ou Vite) qui produit un fichier compact déjà traduit.
ReactDOM.render() a été supprimé dans React 19 ; on écrit ReactDOM.createRoot(document.getElementById("app")).render(p). Les fichiers « UMD » de unpkg n'existent plus non plus à partir de React 19 : pour ces exemples, garde les liens react@16 (ou react@18) du support, ou fais les exercices dans un projet Vite.
Une liste de cinq éléments
var liste = <ul>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
ReactDOM.render(liste, document.getElementById("app"));Le JSX s'écrit comme du HTML, dans le code JavaScript. Une instruction peut tenir sur plusieurs lignes ; elle doit commencer par une balise ouvrante et finir par la balise fermante (ici <ul> et </ul>).
Les attributs id et className
En JSX, l'attribut class devient className (car class est un mot réservé de JavaScript).
<style type="text/css">
.red { color: red; }
</style>var liste = <ul id="list1" className="red">
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
ReactDOM.render(liste, document.getElementById("app"));L'attribut style
var liste = <ul id="list1" style={{listStyleType:"none", color:"red"}}>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
ReactDOM.render(liste, document.getElementById("app"));{listStyleType:"none", color:"red"}.style={{ … }}.list-style-type → listStyleType, background-color → backgroundColor.On peut mettre du JavaScript dans le JSX, entouré d'accolades { }. Le navigateur évalue l'instruction et met son résultat à sa place.
var color = "red";
var styleListe = { listStyleType:"none", color:color };
var liste = <ul id="list1" style={styleListe}>
<li> Element1 </li>
<li> Element2 </li>
<li> Element3 </li>
<li> Element4 </li>
<li> Element5 </li>
</ul>;
ReactDOM.render(liste, document.getElementById("app"));Afficher les éléments d'un tableau avec map
var color = "red";
var styleListe = { listStyleType:"none", color:color };
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var liste = <ul id="list1" style={styleListe}>
{
elems.map(function(elem, index) {
return <li key={index}>{elem}</li>
})
}
</ul>;
ReactDOM.render(liste, document.getElementById("app"));elems.map(...) est du JavaScript : il est entre accolades ;{elem} et {index} aussi ;key donne un identifiant unique à chaque élément d'une liste. Sans lui, React affiche l'avertissement : « Each child in an array or iterator should have a unique "key" prop. »Avec la fonction fléchée ES6 :
elems.map((elem, index) => {
return <li key={index}>{elem}</li>
})Et encore plus court, sans accolades ni return (une seule instruction) :
elems.map((elem, index) =>
<li key={index}>{elem}</li>
)key={index} fonctionne pour une liste qui ne change pas. Quand les éléments ont un identifiant (product.id), utilise-le : key={product.id}. C'est ce que tu feras dans le TP.
Le JSX permet de créer ses propres éléments, vus comme des éléments React : ce sont les composants. On crée ici <ListeElements>, qui représente la liste <ul> et ses <li>.
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var ListeElements = function() {
return <ul>
{
elems.map(function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
</ul>
}
ReactDOM.render(<ListeElements/>, document.getElementById("app"));ReactDOM.render() reçoit l'élément <ListeElements/>, qui correspond à la fonction du même nom. Le nom doit commencer par une majuscule, sinon React produit une erreur.
var ListeElements = function() {
return elems.map(function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
ReactDOM.render(<ul><ListeElements/></ul>, document.getElementById("app"));Ici la fonction renvoie directement le résultat de map : pas d'accolades autour (elles provoqueraient une erreur). Le <ul> est écrit dans render.
Transmettre des attributs : l'objet props
On peut créer les attributs que l'on veut sur un élément JSX. Ils arrivent dans la fonction dans un objet appelé props :
var ListeElements = function(props) {
return <ul>
{
props.elems.map(function(elem, index) {
return <li key={index}>{elem}</li>;
})
}
</ul>
}
ReactDOM.render(<ListeElements elems={elems}/>, document.getElementById("app"));var ListeElements = function(props) {
return <ul>
{
props.elems.map(function(elem, index) {
return <li key={index} style={props.style}>{elem}</li>;
})
}
</ul>
}
ReactDOM.render(<ListeElements elems={elems} style={{color:"red"}}/>,
document.getElementById("app"));var ListeElements = function({elems, color}) {
return <ul>
{
elems.map(function(elem, index) {
return <li key={index} style={{color:color}}>{elem}</li>;
})
}
</ul>
}
ReactDOM.render(<ListeElements elems={elems} color="red"/>,
document.getElementById("app"));Ce que tu vas voir (9 min) : le chapitre « Les props » : le parent passe des attributs à un composant enfant, l'enfant les lit dans props (ou par déstructuration) et le même composant s'affiche avec des données différentes. C'est <ListeElements elems={elems} color="red"/>.
Découper en composants : Element et ListeElements
React encourage à créer un maximum de composants indépendants, réutilisables ailleurs. Ici, chaque <li> devient un composant <Element> :
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
var Element = function({color, elem}) {
return <li style={{color:color}}>{elem}</li>;
}
var ListeElements = function({elems, color}) {
return <ul>
{
elems.map(function(elem, index) {
return <Element key={index} elem={elem} color={color} />
})
}
</ul>
}
ReactDOM.render(<ListeElements elems={elems} color="red" />, document.getElementById("app"));key se met sur <Element> (l'élément créé dans la boucle), mais n'est pas lu dans les paramètres de la fonction Element : React le garde pour lui.
Dans ce dernier exemple, la ligne ReactDOM.render(...) du support est coupée (il manque document.getElementById("app"));). Le code ci-dessus est complet.
On peut aussi créer un composant avec une classe qui hérite de React.Component. La classe a une méthode render() qui renvoie le JSX, et lit les attributs dans this.props.
var elems = ["Element1", "Element2", "Element3", "Element4", "Element5"];
class Element extends React.Component {
constructor(props) {
super(props);
}
render() {
return <li style={{color:this.props.color}}>{this.props.elem}</li>
}
}
class ListeElements extends React.Component {
constructor(props) {
super(props);
}
render() {
return <ul>
{
this.props.elems.map((elem, index) => {
return <Element key={index} elem={elem} color={this.props.color} />
})
}
</ul>
}
}
ReactDOM.render(<ListeElements elems={elems} color="red" />, document.getElementById("app"));Dans une classe, une fonction écrite avec function dans map perd la valeur de this : this.props serait undefined. La fonction fléchée => garde le this de la classe. C'est pour cela que le support l'utilise ici.
Ce que tu vas voir : revois la partie sur class, constructor, extends et super : un composant classe React n'est rien d'autre qu'une classe qui hérite de React.Component et qui appelle super(props) dans son constructeur. Observe aussi comment this désigne l'objet dans les méthodes.
Les deux écritures donnent le même résultat. Le support donne la règle suivante :
state (l'état du composant, chapitre 6).Cette règle date d'avant les Hooks (React 16.8, 2019). Aujourd'hui, un composant fonction peut avoir un état grâce à useState (chapitre 11) : on écrit presque tous les nouveaux composants avec des fonctions. Les classes restent à connaître : on les trouve dans beaucoup de projets existants et dans ce module.
Un seul élément parent
On ne peut pas renvoyer plusieurs éléments JSX de même niveau : il faut un seul parent qui les contient. On utilise en général une <div>, ou le composant <React.Fragment>, qui joue le rôle de parent sans ajouter de balise dans la page (il n'apparaît pas non plus dans l'arbre React).
function ListeElements(props) {
return <React.Fragment>
<div>Element1</div>
<div>Element2</div>
<div>Element3</div>
</React.Fragment>
}
ReactDOM.render(<ListeElements />, document.getElementById("app"));<React.Fragment>…</React.Fragment> s'écrit aussi <>…</> (dans un projet Vite ou create-react-app).
Les parenthèses
Sans parenthèses, le premier élément JSX doit être sur la même ligne que return : sinon JavaScript renvoie undefined. Avec des parenthèses, on peut aller à la ligne et bien aligner le code :
function ListeElements(props) {
return <ul>
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
}function ListeElements(props) {
return (
<ul>
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
)
}
ReactDOM.render(<ListeElements />, document.getElementById("app"));Les commentaires
Dans le JSX, on commente avec {/* … */} ; les commentaires // ne fonctionnent pas.
function ListeElements(props) {
return (
<ul>
<li>Element1</li>
{/* <li>Element2</li>
<li>Element3</li>*/}
<li>Element4</li>
<li>Element5</li>
</ul>
)
}Element2 et Element3 ne s'affichent pas.
Les expressions conditionnelles
L'opérateur ternaire ? : s'utilise dans le JSX, entre accolades. Ici, l'attribut hideFirstItem cache le premier élément quand il vaut true :
function ListeElements(props) {
return (
<ul>
{ props.hideFirstItem ? null : <li>Element1</li> }
<li>Element2</li>
<li>Element3</li>
<li>Element4</li>
<li>Element5</li>
</ul>
)
}
ReactDOM.render(<ListeElements hideFirstItem={true} />, document.getElementById("app"));Renvoyer null veut dire « ne rien afficher ».
On veut afficher une grille de cartes de produits avec Bootstrap. Crée la page 02-JSX/index.html : elle charge Bootstrap, React, ReactDOM et Babel, et le code JSX est dans une balise type="text/babel".
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
// Code JSX
</script>
</html>Pense en composants : chaque partie réutilisable du site est un composant. Le même composant affiche n'importe quel produit : peu importe le nombre de produits, l'affichage se fait sans effort.
1. Crée le composant <Product /> qui affiche un produit avec cette carte :
<div className="col">
<div className="card shadow-sm">
<img className="bd-placeholder-img card-img-top" src="..." alt="" />
<div className="card-body">
<p className="card-title">Titre de produit</p>
<p className="card-text">Prix de produit</p>
<div className="d-flex justify-content-between align-items-center">
<div className="btn-group">
<button type="button" className="btn btn-sm btn-outline-secondary">Ajouter au panier</button>
</div>
</div>
</div>
</div>
</div>2. Crée le composant <Products /> qui affiche tous les produits du tableau products :
const products = [
{ id: 1, title: 'PC Portable Gamer HP VICTUS', price: '7490 DH', thumbnail: 'HP16D0195NF.jpg' },
{ id: 2, title: 'PC Portable Gamer HP VICTUS', price: '2190 DH', thumbnail: 'HP14424U3EA.jpg' },
{ id: 3, title: 'Pc Portable Chromebook Acer', price: '3640 DH', thumbnail: 'NXATHEF002.jpg' },
{ id: 4, title: 'PC Portable - HUAWEI', price: '1270 DH', thumbnail: 'HUA6901443442959.jpg' },
];Utilise ce code pour parcourir les produits :
{products.map((product) => (
<Product key={product.id} title={product.title}
price={product.price} thumbnail={product.thumbnail} />
))}3. Affiche <Products /> : ReactDOM.render(<Products/>, document.getElementById("app"));
Ce que tu vas voir (10 min) : les chapitres « Création d'un nouveau composant », « Découverte des props » et « Découverte de la fonction map » : le formateur crée un composant, lui passe des props, puis affiche toute une liste d'objets avec map. C'est exactement la démarche du TP : <Product /> puis <Products /> avec products.map(...).
Réalise les étapes 1 à 3 du TP de la section 8 : le composant <Product /> affiche le titre, le prix et l'image reçus en props ; <Products /> affiche les quatre produits dans une grille Bootstrap (row row-cols-1 row-cols-md-4 g-3).
Ce code contient 5 erreurs. Corrige-les.
function carte(props) {
return
<h2 class="titre">{props.titre}</h2>
<p style="color: blue">{props.texte}</p>
}
ReactDOM.render(<carte titre="React" texte="Bonjour" />, document.getElementById("app"));Ce que tu vas voir (9 min) : les chapitres « className en React », « Les fragments », « JSX : les accolades {} » et « Les styles en React » : l'attribut className, le parent unique et <>…</>, les expressions entre accolades et le style sous forme d'objet. Ce sont les sections 2, 3 et 7 de ce chapitre.
Avec const modules = ["M201 Préparation d'un projet web", "M202 Approche agile", "M203 Gestion des données", "M204 React"], crée le composant fonction <ListeModules modules={modules} couleur="green" /> qui affiche une liste <ol> ; chaque module est un composant <Module>. Ajoute un attribut cacherPremier qui, à true, cache le premier module.