Module 1Les bases de React
Chapitre 6 sur 18
Passer des valeurs, objets et tableaux en props, props.children, l'état d'un composant classe avec setState, et le TP du jeu de Dé.
Objectifs
Avec ce chapitre, tu sauras…
props.x) et dans un composant classe (this.props.x) ;props.children ;this.state et this.setState() ;Leçon 1
Les composants sont réutilisables : on veut souvent afficher le même composant plusieurs fois avec des informations différentes. React utilise pour cela l'objet props (properties), qui passe les informations au composant et le rend dynamique.
Leçon 2
Crée le projet seancePropsState, le dossier src/components et le fichier Presentation.js :
import React from 'react'
export default function Presentation(props){
console.log(props)
return (
<div >
<h2>Salut {props.nom} {props.prenom}</h2>
<hr/>
</div>
)
}import React from 'react';
import ReactDOM from 'react-dom/client'
import Presentation from './components/Presentation';
const element=document.getElementById("root")
const root=ReactDOM.createRoot(element)
function App(){
return(
<div>
<Presentation nom="Rami" prenom="Ahmed"/>
<Presentation nom="Kamali" prenom="Ali" />
<Presentation nom="Fahmi" prenom="Khalid"/>
</div>
)
}
root.render(<App/>)Le navigateur affiche trois salutations ; la console affiche trois objets {nom: 'Rami', prenom: 'Ahmed'}…
On peut passer dans props : une valeur, un objet, une liste.
Passer un objet
function App(){
let personne1={nom:"Rami",prenom:"Ahmed"}
let personne2={nom:"Kamali",prenom:"Ali"}
let personne3={nom:"Fahmi",prenom:"Khalid"}
return(
<div>
<Presentation personne={personne1}/>
<Presentation personne={personne2} />
<Presentation personne={personne3} />
</div>
)
}On peut aussi passer l'objet directement : <Presentation personne={{nom:"Fahmi",prenom:"Khalid"}} />. Cette fois, props vaut {personne: {nom: 'Rami', prenom: 'Ahmed'}} :
export default function Presentation(props){
console.log(props)
return (
<div >
<h2>Salut {props.personne.nom} {props.personne.prenom}</h2>
<hr/>
</div>
)
}export default function Presentation(props){
console.log(props)
const {nom,prenom}=props.personne
return (
<div >
<h2>Salut {nom} {prenom}</h2>
<hr/>
</div>
)
}Passer un tableau (Array)
function App(){
let personne1={nom:"Rami",prenom:"Ahmed"}
let diplomes=["Bac","Licence","Master"]
return(
<div>
<Presentation personne={personne1} diplomes={diplomes} />
</div>
)
}export default function Presentation(props){
console.log(props)
const {nom,prenom}=props.personne
return (
<div >
<h2>Salut {nom} {prenom}</h2>
<hr/>
<h3>Diplomes</h3>
<p>{props.diplomes}</p>
</div>
)
}props vaut maintenant {personne: {nom: "Rami", prenom: "Ahmed"}, diplomes: ["Bac", "Licence", "Master"]}. React colle les éléments du tableau en une chaîne : « BacLicenceMaster ». Pour afficher une vraie liste, on utilisera map (chapitre 8).
Vidéo · À regarder
FRApprendre React de Zéro (Cours complet pour débutants)
Louis D · YouTube
Leçon 3
| Composant fonction | Composant classe | |
|---|---|---|
| reçoit les props | en paramètre : function Presentation(props) | dans l'objet : this.props |
| lire le nom | props.nom | this.props.nom |
| lire un objet | props.personne.nom | this.props.personne.nom |
Leçon 4
Vidéo · À regarder
FRTuto React débutant - Apprendre les bases de React en 2024
front-end · YouTube
Leçon 5
| props | state |
|---|---|
| donné par le parent | appartient au composant lui-même |
| immuable (lecture seule) | modifiable avec setState() |
Leçon 6
1<Presentation nom="Rami"/> passe à la fonction…
2L'écriture props.nom = 'Jamili' est…
3Dans une classe, on lit la prop nom avec…
4Les éléments placés entre <Presentation> et </Presentation> se lisent avec…
5Pour modifier l'état d'une classe, on utilise…
6Après setState(), React…
7this.state.message = "x" …
8{props.diplomes} avec ["Bac","Licence"] affiche…
L'essentiel du chapitre
personne={personne1} ou {{…}}), un tableau.function C(props) → props.nom, ou déstructuration const {nom} = props.personne. Classe : this.props.nom.props.children : le contenu placé entre les balises du composant.this.state = {...}), modifié uniquement par this.setState({...}), qui rappelle render().this.state.x directement ne met pas l'écran à jour. Aujourd'hui, les fonctions ont aussi un état avec useState.Vidéo · À regarder
Apprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Ce que tu vas voir (4 min) : le chapitre « Découverte des props » : le même composant utilisé plusieurs fois avec des attributs différents, lus dans props. C'est l'exemple <Presentation nom=… prenom=…/> de la section 2.
Dans un composant classe, props est accessible directement dans l'objet, avec le mot-clé this : {this.props.nom}.
import React from 'react'
export default class Salutation extends React.Component{
render(){
console.log(this.props)
return (
<div >
<h2>Salut {this.props.nom} {this.props.prenom}</h2>
<hr/>
</div>)
}}function App(){
return(
<div>
<Salutation nom="Rami" prenom="Ahmed" />
<Salutation nom="Kamali" prenom="Ali" />
<Salutation nom="fahmi" prenom="Khalid" />
</div>
)
}<Salutation nom="Rami" prenom="Ahmed"/> crée une instance de la classe Salutation ; ensuite sa méthode render() est exécutée et renvoie le JSX.
function App() {
let personne1 = { nom: "Rami", prenom: "Ahmed" };
let diplomes = ["Bac", "Licence", "Master"];
return (
<div>
<Salutation personne={personne1} diplomes={diplomes} />
</div>
);
}
// Salutation.js
export default class Salutation extends React.Component {
render() {
console.log(this.props);
return (
<div>
<h2>
Salut {this.props.personne.nom} {this.props.personne.prenom}
</h2>
<h3>Diplomes</h3>
<p>{this.props.diplomes}</p>
<hr />
</div>
);
}
}On peut mettre des éléments enfants entre la balise ouvrante et la balise fermante d'un composant. Ici, un paragraphe pour l'un, un bouton pour l'autre :
function App() {
return (
<div>
<Presentation nom="Rami" prenom="Ahmed">
<p>ce ci est un children props</p>
</Presentation>
<Presentation nom="Kamali" prenom="Ali">
<button>quitter</button>
</Presentation>
</div>
);
}Le composant récupère ces enfants avec la propriété props.children :
export default function Presentation(props){
console.log(props)
return (
<div >
<h2>Salut {props.nom} {props.prenom}</h2>
{props.children}
<hr/>
</div>
)
}Ce que tu vas voir (4 min) : le chapitre « La prop children » : le contenu placé entre la balise ouvrante et la balise fermante d'un composant, récupéré avec props.children. C'est la section 4.
Presentation est un cadre : il dessine toujours le titre et la ligne. Ce que tu mets dedans (children) change à chaque utilisation : une photo, un texte, un bouton…
Le state (état) est un objet qu'on peut mettre à jour. Il contient les données qui changent et contrôle le comportement du composant. Quand l'état change, React réaffiche automatiquement le composant.
Exemple : le composant Message affiche « Bien venu visiteur » et un bouton « inscription ». Après un clic, le message devient « votre inscription est effectuée » et le bouton « merci ». Il faut donc deux variables, message et btnMessage, dont la modification doit rafraîchir l'affichage : ce sont des propriétés de l'état.
import React from 'react'
export default class Message extends React.Component{
constructor(){
super()
this.state={message:"Bien venu visiteur",btnMessage:"inscription"}
}
inscription(){
this.setState({message:"votre inscription est effectuée",btnMessage:"merci"})
}
render(){
return(<div>
<h2>{this.state.message}</h2>
<button onClick={()=>this.inscription()} >{this.state.btnMessage}</button>
</div>)
}
}function App() {
return (
<div>
<Message/>
</div>
);
}
root.render(<App />);L'explication du code
super() (le constructeur de React.Component), puis crée l'objet state avec ses deux propriétés initialisées. state est une propriété de l'objet Message.inscription() change les valeurs avec this.setState({...}).setState modifie les propriétés puis appelle render() : l'interface affiche les nouvelles valeurs de {this.state.message} et {this.state.btnMessage}.inscription() au clic : onClick={() => this.inscription()} (les événements sont détaillés au chapitre 7).this.state.message= "message 1" // INTERDIT
this.state.btnMessage="message 2" // INTERDIT
Cette écriture change bien l'état, mais n'appelle pas render() : l'écran n'affiche pas les nouvelles valeurs. La mise à jour de l'état se fait uniquement avec setState().
Le support affirme que « seuls les composants de classe peuvent avoir un état, pas les composants fonctionnels ». C'était vrai avant 2019. Depuis React 16.8, un composant fonction a un état grâce au hook useState (chapitre 11). Pour ce chapitre et le contrôle, travaille avec les classes comme le support.
À chaque clic sur jouer, le programme tire une face au hasard (de 1 à 6) et l'affiche, ainsi que le nombre d'essais. Si la face tirée est égale à la face cachée passée dans les props, il affiche « Bravo vous avez trouvez la face cachée… » puis le bouton Initialiser, qui remet l'interface à zéro.
import React from "react";
export default class JeuDe extends React.Component {
constructor(props) {
super(props);
this.state = { face: null, compteur: 0, fin: false };
}
jouer() {
const valeur = Math.floor(Math.random() * 6) + 1;
//completer le code
}
initialiser(){
this.setState({ face:null, compteur: 0, fin: false });
}
render() {
return (
<div>
<img src="images/Dé.PNG" />
<h1>Jeu de Dé...</h1>
<h2>face:….. </h2>
<h2>nombre d'essais…..</h2>
<button onClick={() => this.jouer()}>jouer</button>
<p>Bravo vous avez trouvez la face cachée.....</p>
<button onClick={() => this.initialiser()}>Initialiser</button>
</div>
);
}
}function App() {
return (
<div>
<JeuDe cache={2}/>
</div>
);
}
root.render(<App />);La face cachée est passée dans les props : ici cache={2}.
Amélioration : affiche la face tirée sous forme d'image (images/face1.png … images/face6.png, dans le dossier public/images) avec une méthode getImage() :
getImage() {
//cette méthde retourne un string sous forme 'images/face1.png'
}
render() {
const styleImage = { width: "60px", height: "60px" };
return (
<div>
<img src="images/Dé.PNG" />
<h1>Jeu de Dé...</h1>
<h2>face……</h2>
<img src={this.getImage()} style={styleImage} />
<h2>nombre d'essais………</h2>
<button onClick={() => this.jouer()}>jouer</button>
<p>Bravo vous avez trouvez la face cachée.....</p>
<button onClick={() => this.initialiser()}>Initialiser</button>
</div>
);
}Le code du TP ferme plusieurs titres avec <h2> ou h2> au lieu de </h2> : le JSX ne compile pas. Les codes ci-dessus sont corrigés.
Complète jouer() et render() du jeu de Dé (section 6), puis réalise l'amélioration avec getImage().
Crée la classe Like avec l'état { likes: 0 } et un bouton « J'aime (n) ». Chaque clic ajoute 1. Ajoute la prop titre (affichée dans un <h3>) et utilise trois fois le composant avec des titres différents : chaque compteur est indépendant.
Ce que tu vas voir (8 min) : le chapitre « Le state » : une valeur gardée par le composant, modifiée avec la fonction de mise à jour, qui réaffiche le composant (alors qu'une variable ordinaire ne change rien à l'écran). Le formateur utilise useState (chapitre 11), mais le principe est celui de this.state et this.setState().
Crée le composant fonction Carte qui reçoit personne={{nom, prenom, ville}} et affiche le nom complet et la ville ; sous ces informations, il affiche ses children. Utilise-le deux fois : une fois avec un paragraphe « Stagiaire en développement digital », une fois avec un bouton « Contacter ».