seance6 cours

Presentation.js import React from 'react' export default function Presentation(props){ console.log(props) return ( <div > <h2>Salut {props.nom} {props.prenom}</h2>

Le fichier index.js 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>

On remarque que props c’est un objet JavaScript L’objet props est immuable c.-à-d. on ne peut pas changer les propriétés Cette écriture n’est pas permise : props.nom=’Jamili’

Fait appel à la fonction Presentation en passant en argument l’objet props qui fait référence à l’objet {nom: 'Rami', prenom: 'Ahmed'} , cet objet est créé à partir des attributs nom, prenom de l’élément Presentation.

import React from 'react' export default function Presentation(props){ console.log(props) return ( <div > <h2>Salut {props.nom} {props.prenom}</h2>

Cette écriture permet de récupérer les propriétés nom et prenom de l’objet props passé en argument de la fonction Presentation <h2>Salut {props.nom}

Passage d’un objet dans props 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>

Remarque : on peut passer directement l’objet <Presentation personne={{nom:"Fahmi",prenom:"Khalid"}}

Récupération des données passes dans l’objet props import React from 'react' export default function Presentation(props){ console.log(props) return ( <div > <h2>Salut {props.personne.nom} {props.personne.prenom}</h2>