https://cegepmv.github.io/420-211/2-dda/index.htmlData-driven Applications L’une des grandes forces de React est la réutilisabilité des composants. Un composant bien conçu peut être utilisé plusieurs fois dans une application, avec des données différentes, permettant ainsi de réduire la duplication du code et de rendre le développement plus efficace. Ce que nous allons allons explorer dans ce module : L’insertion de JavaScript dans JSX L’utilisation des props pour transmettre des données aux composants La gestion des actifs statiques La mise en correspondance des données avec les composantsHugofr-frhttps://cegepmv.github.io/420-211/2-dda/1-js-dans-jsx/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/1-js-dans-jsx/index.htmlReact permet d’intégrer du JavaScript directement dans le JSX à l’aide des accolades {}. Cela nous permet d’afficher des variables, d’effectuer des calculs ou d’utiliser des expressions JavaScript dans notre interface. Exemple simple : On peut afficher une variable directement dans du JSX : function Greeting() { const name = "Alice"; return <h1>Bonjour, {name} !</h1>; } Dans cet exemple, la variable name est insérée dynamiquement à l’intérieur du <h1>. Exemple avec un calcul : On peut aussi exécuter des calculs dans JSX :https://cegepmv.github.io/420-211/2-dda/2-props/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/2-props/index.htmlLes props (propriétés) permettent à un composant parent de transmettre des informations à un composant enfant. Elles sont accessibles en tant qu’attributs dans le JSX et en tant qu’objet dans le composant enfant. Exemple de composant avec props function App() { return ( <div> <WelcomeMessage name="Alice" /> <WelcomeMessage name="Bob" /> </div> ); } Ici, le composant WelcomeMessage est réutilisé avec des valeurs différentes passées via les props.https://cegepmv.github.io/420-211/2-dda/3-actifs-statiques/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/3-actifs-statiques/index.htmlDans une application React, les images et autres fichiers statiques sont généralement placés dans le dossier public ou src/assets. Exemple d’image importée depuis public function Logo() { return <img src="https://cegepmv.github.io/420-211/logo.png" alt="Logo" />; } Exemple d’image importée depuis src/assets import logo from "./assets/logo.png"; function Logo() { return <img src={logo} alt="Logo" />; } L’importation permet d’assurer que l’image est bien prise en compte lors de la compilation.https://cegepmv.github.io/420-211/2-dda/4-donnees-composants/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/4-donnees-composants/index.htmlMise en correspondance Il est courant de générer dynamiquement des composants à partir d’un tableau de données. Cela se fait généralement avec la méthode map(). Exemple de liste d’éléments dynamiques const users = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, { id: 3, name: "Charlie", age: 35 } ]; function UserList() { return ( <ul> {users.map(user => ( <li key={user.id}>{user.name} - {user.age} ans</li> ))} </ul> ); } Dans cet exemple, chaque élément de la liste est généré dynamiquement en utilisant map(), et un key unique est attribué à chaque élément pour améliorer les performances de React.https://cegepmv.github.io/420-211/2-dda/5-exercice-dirige/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/5-exercice-dirige/index.htmlRéutilisabilité des composants L’objectif de cet exercice est de refactoriser la page web précédemment développée afin d’améliorer la réutilisabilité des composants. Vous devrez optimiser votre implémentation en appliquant les bonnes pratiques de développement avec React, notamment en structurant le code de manière modulaire et en favorisant la transmission efficace des données entre les composants. 🎯 Objectifs : Identifier et extraire les éléments communs dans des composants réutilisables. Utiliser les props pour transmettre les données nécessaires aux composants. Simplifier et structurer votre code en évitant les répétitions. Points clés à améliorer :https://cegepmv.github.io/420-211/2-dda/6-exercices-props/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/2-dda/6-exercices-props/index.htmlLa section suivante présente une série d’exercices visant à renforcer votre compréhension de la transmission des données entre composants et la réutilisabilité de ceux-ci. Exercice 1 : Affichage dynamique d’un message d’accueil Objectif : Créez un composant WelcomeBanner qui affiche un message de bienvenue basé sur la prop username. Instructions Créez un composant WelcomeBanner qui prend une prop username (string) et affiche : "Bienvenue sur notre site, [username] !". Dans le composant App, utilisez WelcomeBanner avec trois utilisateurs différents (par exemple, “Alice”, “Bob”, “Charlie”). Vérification