Module 2Construire une application React
Chapitre 7 sur 18
onClick, onSubmit et onChange, la communication parent-enfant et enfant-parent, le cycle de vie des composants et useEffect.
Objectifs
Avec ce chapitre, tu sauras…
onClick, onSubmit, onChange) avec une fonction callback ou une fonction fléchée ;onClick={envoyer()} ;componentDidMount, componentDidUpdate, componentWillUnmount, et son équivalent useEffect.:::savoir Note sur useState dans ce chapitre
Le support de la séance 8 utilise déjà le hook useState dans les composants fonction : const [nom, setNom] = useState(). Retiens pour l'instant : nom est la valeur de l'état, setNom(valeur) la change et réaffiche le composant (comme this.setState au chapitre 6). Les hooks sont expliqués en détail au chapitre 11.
:::
Leçon 1
Gérer les événements en React ressemble beaucoup au DOM, avec deux différences :
onClick) et non en minuscules (onclick) ;| Événement | HTML | React |
|---|---|---|
| onClick | <button onclick="ajouter()"> | <button onClick={ajouter}> (callback) ou <button onClick={() => ajouter()}> (fléchée) |
| onSubmit | <form onsubmit="console.log('You clicked submit.'); return false"> | <form onSubmit={handleSubmit}> ou <form onSubmit={(event) => handleSubmit(event)}> |
| onChange | <input type="text" onchange="changeNom()"> | <input type="text" onChange={changeNom}> |
Vidéo · À regarder
FRTuto React débutant - Apprendre les bases de React en 2024
front-end · YouTube
Leçon 2
Vidéo · À regarder
FRApprendre React de Zéro (Cours complet pour débutants)
Louis D · YouTube
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Leçon 3
| Phase | Méthodes appelées, dans l'ordre |
|---|---|
| montage (le composant apparaît) | constructor → render → componentDidMount |
mise à jour (après setState ou nouvelles props) | render → componentDidUpdate |
| démontage (le composant disparaît) | componentWillUnmount |
| Action | Console |
|---|---|
1En React, l'événement clic s'écrit…
2Laquelle de ces écritures est correcte ?
3e.preventDefault() dans onSubmit sert à…
4e.target.value donne…
5Un enfant envoie une donnée à son parent…
6La méthode appelée juste après le premier affichage est…
7Après un setState, React appelle…
8useEffect(f, []) exécute f…
L'essentiel du chapitre
onClick, onSubmit, onChange), avec une fonction : onClick={f} ou onClick={() => f()} ; jamais onClick={f()} (boucle de rendus).e.preventDefault() empêche le rechargement ; e.target.value = valeur du champ.onChercheSubmit={onChercheSubmitApp}) ; l'enfant l'appelle avec la donnée (props.onChercheSubmit(term)).constructor → render → componentDidMount ; mise à jour render → componentDidUpdate ; démontage componentWillUnmount.useEffect(fonction, [dépendances]) ; [] = au montage seulement ; la fonction renvoyée = au démontage.constructeur, Render, Component Did mount |
| clic sur Incrementer ou Decrementer | Render, Component Did update |
| clic sur Demonter | Component est demonté |
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
import React from 'react'
export default function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
//arrow function
<form onSubmit={(event)=>handleSubmit(event)}>
<button type="submit">Submit</button>
</form>
);
}export default function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
//callBack function
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}e.preventDefault() empêche le comportement par défaut du formulaire (envoyer et recharger la page). En HTML, on écrivait return false ; en React, il faut appeler preventDefault().
Pour onClick, le support donne deux fois le même code <button onClick={ajouter}> sous les titres « callBack function » et « Arrow function ». La version fonction fléchée s'écrit : <button onClick={() => ajouter()}>Ajouter article</button>.
Exercice d'application 1 : afficher le nom et le prénom
Quand l'utilisateur clique sur Afficher, un message affiche le nom et le prénom saisis (en majuscules).
import React, { useState } from "react";
export default function Inscription(){
const [nom,setNom]=useState()
const [prenom,setPrenom]=useState()
const [information,setInformation]=useState()
function envoyer(){
setInformation(`nom:${nom} prenom:${prenom}`)
}
return(
<div>
<h2></h2>
<div>
<label>Nom:</label><input type="text"
onChange={(e)=>{setNom(e.target.value.toUpperCase())}}/>
</div>
<div>
<label>Prenom:</label><input type="text"
onChange={(e)=>{setPrenom(e.target.value.toUpperCase())}}/>
</div>
<button onClick={envoyer}>Afficher</button>
<p>{information}</p>
</div>
)
}e.target.value : la valeur actuelle du champ qui a déclenché l'événement ;onChange met à jour nom ou prenom ;envoyer, qui construit le message dans information.Si on écrit <button onClick={envoyer()}>, on appelle envoyer à chaque affichage du composant, au lieu de lui donner la fonction. Or envoyer appelle setInformation, qui réaffiche le composant… qui rappelle envoyer… React s'arrête avec l'erreur « Too many re-renders ». Règle : onClick={envoyer} (sans parenthèses) ou onClick={() => envoyer()}.
Ce que tu vas voir (3 min) : le chapitre « Les événements » : relier un bouton à une fonction avec onClick, en passant la fonction (et non en l'appelant). C'est la section 1 et l'exercice 1.
Exercice d'application 2 : le validateur de mot de passe
Un champ demande un mot de passe d'au moins 4 caractères. Sinon, le message « Password doit avoir au moins 4 caractères » s'affiche.
import React, { useState } from 'react'
export default function Validator(){
const [password,setPassword]=useState('')
return(
<div>
<div>
<label>Entrer votre password:</label>
<input type="password"
value={password}
onChange={(event)=>setPassword(event.target.value)}
/>
</div>
{password.length<4?"Password doit avoir au moins 4 caractères":""}
</div>
)
}import React from 'react'
export default class Validator extends React.Component{
constructor (){
super();
this.state={password:''}
}
render(){
return(
<div>
<div>
<label>Entrer votre password:</label>
<input type="password"
value={this.state.password}
onChange={(event)=> this.setState({password:event.target.value})}
/>
</div>
{this.state.password.length<4?"Password doit avoir au moins 4 caractères":""}
</div>
)
}
}À chaque frappe, l'état change, le composant se réaffiche et le ternaire recalcule le message.
L'exemple : trois composants. App contient ChercheBar (un formulaire de recherche) et ResultatList (la liste des résultats).
const list=[
{nom:"banane",type:"fruit"},
{nom:"orange",type:"fruit"},
{nom:"pomme",type:"fruit"},
{nom:"raisins",type:"fruit"},
{nom:"kiwi",type:"fruit"},
{nom:"tomate",type:"legume"},
{nom:"carotte",type:"legume"},
{nom:"pomme de terre",type:"legume"},
{nom:"navet",type:"legume"},
{nom:"poivron",type:"legume"}
]L'utilisateur saisit un type (« fruit » ou « legume ») dans ChercheBar. L'envoi du formulaire appelle une fonction callback avec la valeur saisie ; cette fonction filtre la liste, et ResultatList affiche les éléments filtrés.
@startuml
skinparam shadowing false
rectangle "App\nétat : type, resultats\nfonction onChercheSubmitApp(type)" as App
rectangle "ChercheBar\nétat : term" as CB
rectangle "ResultatList" as RL
App -down-> CB : 1. props onChercheSubmit = onChercheSubmitApp
CB -up-> App : 2. submit : props.onChercheSubmit(term)
App -down-> RL : 3. props resultats = liste filtrée
@endumlDe parent vers enfant : les props
On l'a vu au chapitre 6 : le parent passe l'information dans les props. Ici, App passe la liste filtrée à ResultatList :
import React, { useState } from 'react'
import ChercheBar from './components/ChercheBar';
import ResultatList from './components/ResultatList';
const list=[ /* … la liste ci-dessus … */ ]
export default function App() {
const [type,setType]=useState('')
const [resultas,setResultas]=useState([])
function onChercheSubmitApp(type){
setType(type)
setResultas(list.filter((item)=>item.type.toUpperCase()==type))
}
return (
<div className='App'>
<h1>Composant App</h1>
<ChercheBar onChercheSubmit={onChercheSubmitApp}/>
<div>
<p>le type:<span style={{color:"rgb(36,44,33)",fontWeight:"bold"}}>{type}</span></p>
</div>
<ResultatList resultats={resultas}/>
</div>
);
}<ResultatList resultats={resultas}/> : ResultatList reçoit les résultats dans props.resultats.
D'enfant vers parent : une fonction callback dans les props
Un enfant ne peut pas modifier l'état de son parent. Mais le parent peut lui donner une fonction :
App passe à ChercheBar la prop onChercheSubmit={onChercheSubmitApp} : une fonction ;ChercheBar appelle props.onChercheSubmit(term) avec la valeur saisie ;onChercheSubmitApp du parent qui s'exécute : elle met à jour type et filtre la liste ;App a changé : ResultatList est réaffiché avec la liste filtrée.import React, { useState } from "react";
export default function ChercheBar(props) {
const [term,setTerm]=useState('')
function onChercheSubmitBar(event){
event.preventDefault()
props.onChercheSubmit(term)
}
return (
<div className="Child">
<form onSubmit={(event)=>onChercheSubmitBar(event)}>
<h2>composant ChercheBar</h2>
<div>
<label>Entrer le mot clé de recherche:</label>
<input type="text" value={term}
onChange={(event)=>setTerm(event.target.value.toUpperCase())} />
</div>
<button type="submit">chercher</button>
</form>
</div>
);
}import React from "react";
export default function ResultatList(props) {
return (
<div className="Child">
<h1>composant ResultatList</h1>
{props.resultats.length == 0 ? (
<p>pas de resultats</p>
) : (
<div className="list">
<ul>
{props.resultats.map((item) => {
return <li key={item.nom}>{item.nom}</li>;
})}
</ul>
</div>
)}
</div>
);
}Le parent donne son numéro de téléphone (la fonction) à l'enfant. L'enfant ne peut pas aller dans la chambre du parent changer ses affaires, mais il peut appeler ce numéro et dire « le type est FRUIT ». Le parent fait alors la modification lui-même.
Ce que tu vas voir (7 min) : le chapitre « Passer une fonction dans les props » : le parent donne une fonction à l'enfant, l'enfant l'appelle, et c'est l'état du parent qui change. C'est la communication enfant → parent de ChercheBar et App.
Avec un composant classe
Le cycle de vie d'un composant classe est fait de méthodes optionnelles que React appelle automatiquement au bon moment :
L'exemple : le composant Compteur (incrémenter/décrémenter) et le composant AppCompteur, qui a deux boutons Monter et Démonter pour afficher ou retirer Compteur (il sert à tester componentWillUnmount).
import React from "react";
import ReactDOM from "react-dom/client";
import AppCompteur from "./components/AppCompteur";
const root=ReactDOM.createRoot(document.getElementById("root"))
root.render(<AppCompteur/>);import React from 'react'
export default class Compteur extends React.Component{
constructor(props) {
console.log("constructeur")
super(props)
this.state = {
compteur:0
}
this.incrementer=()=>{this.setState({compteur:this.state.compteur+1})}
this.decrementer=()=>{this.setState({compteur:this.state.compteur-1})}
}
componentDidMount(){
//cette methode est executé aprés render
console.log("Component Did mount")
console.log('--------------------')
}
componentDidUpdate(){
//cette methode est executé aprés mise à jour par setState
console.log("Component Did update")
console.log('--------------------')
}
componentWillUnmount(){
console.log("Component est demonté")
}
render(){
console.log('Render')
return(
<div style={{background:"yellow"}} >
<h3>composant Compteur</h3>
<p>compteur:{this.state.compteur}</p>
<button onClick={this.incrementer}>Incrementer</button>
<button onClick={this.decrementer}>Decrementer</button>
</div>
)
}
}import React from 'react'
import Compteur from './Compteur'
export default class AppCompteur extends React.Component{
constructor(props) {
super(props)
this.state={isMonter:true}
this.monter=()=>{this.setState({isMonter:true})}
this.demonter=()=>{this.setState({isMonter:false})}
}
render(){
return(
<div >
<button onClick={this.monter} disabled={this.state.isMonter}>Monter</button>
<button onClick={this.demonter} disabled={!this.state.isMonter}>Demonter</button>
{ this.state.isMonter? <Compteur/>:null}
</div>
)
}
}Ce que montre la console :
Réalise Compteur et AppCompteur. Ouvre la console et note ce qui s'affiche : (1) au chargement ; (2) après 2 clics sur Incrementer ; (3) après Demonter ; (4) après Monter. Explique pourquoi le compteur repart à 0 après Monter.
Ce composant provoque l'erreur « Too many re-renders ». Explique pourquoi et corrige-le.
export default function Bonjour(){
const [msg, setMsg] = useState("")
function dire(){ setMsg("Bonjour !") }
return <div><button onClick={dire()}>Dire bonjour</button><p>{msg}</p></div>
}Ce que tu vas voir (10 min) : le chapitre « useState : exemple pratique avec une liste » : une liste gardée dans l'état, un champ et des boutons qui la modifient, et l'affichage avec map. Même mécanique que la recherche de fruits et légumes.
En développement, React.StrictMode (dans index.js des projets create-react-app et Vite) monte deux fois les composants pour détecter les erreurs : tu verras les messages en double. C'est normal, et cela n'arrive pas en production. Ici, index.js n'utilise pas StrictMode : les messages sont simples.
Avec un composant fonction : useEffect
Le hook useEffect donne les mêmes résultats que componentDidMount, componentDidUpdate et componentWillUnmount. Il prend deux paramètres :
componentDidMount) ;[].useEffect(() => {
console.log("Component Did mount"); // après le premier rendu
return () => console.log("Component est demonté"); // au démontage
}, []);Ce que tu vas voir (10 min) : les chapitres « useEffect expliqué » et « useEffect : nettoyage / return » : le code exécuté après l'affichage, le tableau de dépendances, et la fonction renvoyée appelée au démontage. Compare avec componentDidMount, componentDidUpdate et componentWillUnmount.
Crée le composant Convertisseur : un champ « Montant en DH » ; à chaque frappe, il affiche le montant en euros (1 € = 10,8 DH) avec 2 décimales (toFixed(2)). Si le champ est vide ou négatif, il affiche « Entrez un montant positif ».
Réalise l'application App / ChercheBar / ResultatList de la section 2. Puis améliore-la : (1) le nombre de résultats s'affiche dans ResultatList ; (2) un bouton « Tout afficher » dans ChercheBar affiche la liste complète (ajoute une deuxième prop callback onToutAfficher).