Scribd
Importer
0 vues2 pages

Dev Web Client Riche-Module3

Ce module de formation se concentre sur la maîtrise de React, en mettant l'accent sur le passage d'une manipulation directe du DOM à une approche déclarative basée sur les composants. Les participants apprendront des concepts clés tels que le Virtual DOM, JSX, les Hooks, la communication entre composants, ainsi que la gestion des formulaires et de la validation des données. À l'issue de la formation, les compétences acquises incluront la découpe d'interfaces, la compréhension du flux de données et la réactivité de l'interface.

Transféré par

fastmachbat
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0 vues2 pages

Dev Web Client Riche-Module3

Ce module de formation se concentre sur la maîtrise de React, en mettant l'accent sur le passage d'une manipulation directe du DOM à une approche déclarative basée sur les composants. Les participants apprendront des concepts clés tels que le Virtual DOM, JSX, les Hooks, la communication entre composants, ainsi que la gestion des formulaires et de la validation des données. À l'issue de la formation, les compétences acquises incluront la découpe d'interfaces, la compréhension du flux de données et la réactivité de l'interface.

Transféré par

fastmachbat
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Ce module est le pivot de votre formation.

Pour maîtriser un framework moderne, il ne


suffit pas d'apprendre une syntaxe ; il faut adopter un changement de paradigme :
passer d'une manipulation directe du DOM (Style jQuery) à une approche déclarative
et basée sur les composants.

Voici le détail structuré sur React (avec des parallèles avec [Link]).

1. Introduction au Framework (2h)

L'objectif est de comprendre pourquoi ces outils existent et comment l'écosystème est
structuré.

• Le concept de Virtual DOM : Comment le framework optimise les performances


en ne mettant à jour que ce qui est nécessaire.
• Initialisation : Utilisation de [Link] (le standard actuel) pour créer un projet
ultra-rapide.
• Analyse de la structure : Comprendre le rôle du [Link], du dossier public,
et du point d'entrée [Link] ou [Link].
• Le cycle de vie d'un composant : Montage, mise à jour et démontage.

2. Syntaxe et Templates : La puissance du JSX (3h)

Ici, on apprend à mélanger la logique JavaScript avec la structure HTML.

• JSX (JavaScript XML) : Écrire de l'HTML dans du JS sans concaténation pénible.


• Rendu conditionnel : Utiliser les opérateurs ternaires ? : ou l'opérateur logique
&& pour afficher des éléments selon l'état.
• Listes et Clefs : Utiliser .map() pour transformer des tableaux de données en
listes de composants, et l'importance cruciale de la prop key.

3. Les Hooks (React) / Composition API (Vue) (3h)

C'est ici que l'on gère "l'intelligence" de l'application.

• useState / ref : Gérer l'état local (ex: le contenu d'un champ de texte, l'ouverture
d'un menu).
• useEffect / onMounted : Gérer les effets de bord, comme les appels API
(Fetch/Axios) ou les timers.
• Les règles des Hooks : Pourquoi ils doivent toujours être appelés au premier
niveau du composant.

4. Communication entre composants (3h)

Une application moderne est un assemblage de briques qui doivent se parler.

• Props (Flux descendant) : Faire passer des données d'un parent à un enfant
(lecture seule).
• Lifting State Up (Flux ascendant) : Passer des fonctions de rappel (callbacks)
pour permettre à un enfant de modifier l'état de son parent.
• Context API / Provide-Inject : Éviter le "Prop Drilling" (faire passer une donnée
à travers 10 niveaux) en créant des magasins de données globaux (ex: Thème
sombre/clair, infos utilisateur).

5. Formulaires complexes et Validation (3h)

La partie la plus interactive et souvent la plus complexe d'un front-end.

• Controlled Components : Lier la valeur d'un input à un état pour avoir une
"source unique de vérité".
• Gestion des événements : onChange, onSubmit, et la prévention du
comportement par défaut du navigateur.
• Validation de données : Introduction aux bibliothèques comme Zod ou Yup pour
valider des schémas de données complexes.
• Gestion d'erreurs : Affichage dynamique des messages d'erreur en temps réel.

Résumé des compétences acquises

Concept Maîtrise attendue


Architecture Savoir découper une interface en petits composants réutilisables.
Data Flow Comprendre comment la donnée circule du haut vers le bas.
Réactivité Savoir quand et comment déclencher un re-rendu de l'interface.

Vous aimerez peut-être aussi