https://cegepmv.github.io/420-211/index.htmlBienvenue au cours 420-211 - Applications Web ! Plan du cours Module 0 - Préalables Module 1 - Introduction à React Module 2 - Application basées sur des données (data-driven applications) Module 3 - React dynamique Module 4 - Introduction aux “hooks”Hugofr-frhttps://cegepmv.github.io/420-211/0-intro/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/0-intro/index.html1. HTML, DOM et CSS Une petite révision des concepts vus dans le cours de création de sites Web : HTML Manipulation simple du DOM Style avec CSS 2. Conditions JS Introduction à l’opérateur && et l’opérateur ternaire 3. Objets JS Introduction aux objets JavaScript : déclaration, affectation et accès aux paramètres. 4. Fonctions JS Les différentes syntaxes pour déclarer une fonction en Javascript : Fonctions nommées Fonctions anonymes Fonctions fléchées 5. JS depuis ES5 Introduction aux syntaxes modernes de javascript introduites depuis la version 5https://cegepmv.github.io/420-211/1-intro-react/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/1-intro-react/index.htmlReact est une librairie JavaScript développée par Facebook (Meta) qui permet de créer des interfaces utilisateur dynamiques, modulaires et performantes. Elle est particulièrement utilisée pour construire des applications web modernes où l’interface doit réagir rapidement aux changements de données. L’idée centrale de React repose sur une approche déclarative : plutôt que de manipuler directement le DOM (comme en JavaScript traditionnel), on décrit ce que l’interface doit afficher à un moment donné, et React se charge de synchroniser l’affichage lorsque les données évoluent.https://cegepmv.github.io/420-211/2-dda/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://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 composantshttps://cegepmv.github.io/420-211/3-apps-dynamiques/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/3-apps-dynamiques/index.htmlDans cette section, nous allons apprendre à développer des applications interactives et dynamiques avec React. Jusque là, nous avons vu comment fonctionne React dans les coulisses, les spécificités de la syntaxe JSX, comment créer des pages Web statiques avec React et diviser notre page web en composants. Ensuite, nous avons appris à créer des composants réutilisables, à l’aide de props, faire passer des données dans les composants pour garantir leur réutilisabilité, ce qui nous a permis d’utiliser des données statiques (avec des objets JS) pour générer des portions de nos pages Web (Cards, ListItems etc…).https://cegepmv.github.io/420-211/4-communication-externe/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/4-communication-externe/index.htmlNous avons découvert, dans le module précédent, comment React gère l’état avec useState et comment afficher dynamiquement du contenu avec le rendu conditionnel. Ces concepts nous ont certes permis de créer des composants plus interactifs et réactifs, mais useState n’est en réalité qu’un premier aperçu d’un ensemble d’outils très puissants fournis par React ; les hooks. Qu’est-ce qu’un hook ? Un hook est une fonction spéciale fournie par React qui permet à un composant fonctionnel de gérer des fonctionnalités avancées, comme :https://cegepmv.github.io/420-211/5-react-router/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/5-react-router/index.htmlDans le développement web, le routage fait souvent référence à la division de l’interface utilisateur d’une application sur la base de règles dérivées de l’URL du navigateur. Imaginez que vous cliquez sur un lien et que l’URL passe de https://exemple.com à https://exemple.com/about/. C’est ce qu’on appelle le routage. Lorsque nous visitons le chemin / d’un site web, nous avons l’intention de visiter la page d’accueil de ce site. Si nous visitons /about, nous voulons afficher la page “À propos”, et ainsi de suite.https://cegepmv.github.io/420-211/annexe/index.htmlMon, 01 Jan 0001 00:00:00 +0000https://cegepmv.github.io/420-211/annexe/index.html