Programme pédagogique

Scénario pédagogique de la formation
“Approfondir ses connaissances en React”
Formateur : Dufrène Valérian (Webdevoo Formation)
“Déclaration d’activité enregistrée sous le numéro 32800232680 auprès du préfet de région HAUTS-DE-FRANCE”

1 - Présentation et objectifs

1.1 - Présentation synthétique

Cette formation est dédiée aux apprenants de niveau intermédiaire qui souhaitent approfondir leurs connaissances en React et créer leur première application web.

À l’issue de cette formation, les apprenants seront en capacité de créer une application React, comprenant un système de routage, un contexte de thème et une communication avec une API.

La formation a été créée par l’organisme de formation Webdevoo Formation, en Juillet 2024.

1.2 - Objectifs pédagogiques globaux

1. Comprendre l’utilité de React.
2. Déterminer si React est adapté au développement de son projet.
3. Différencier les différents rôles des composants.
4. Définir ce qu’est un contexte et comment l’utiliser.
5. Savoir créer des composants personnalisés.
6. Apprendre à structurer son projet d’application.
7. Savoir intégrer un système de routage.
8. Apprendre à utiliser une API open-source pour hydrater son application avec des données.
9. Apprendre à compiler son projet pour le mettre en ligne.

À l’issue de cette formation, vous serez capable de réaliser une application web, avec React.

2 - Public et prérequis

2.1 - Public visé par la formation

Cette formation est à destination d’un public ayant un niveau intermédiaire. 

Adresse des locaux : Formation distancielle / Visioconférence.

Le contenu de cette formation n’est pas optimisé pour les personnes en situation de handicap (handicap visuel / handicap nécessitant l’utilisation d’outils à commandes vocales).

2.2 - Prérequis

• Maîtriser la langue française à l’oral et à l’écrit.
• Savoir utiliser un ordinateur.
• Disposer d’un ordinateur (PC ou MAC), disposant d’une connexion internet suffisante pour participer aux sessions de visioconférence et effectuer les exercices en ligne.
• Avoir des connaissances avancées en HTML.
• Avoir des connaissances avancées en CSS.
• Avoir des connaissances avancées en Javascript.
• Avoir des connaissances de base sur React.
• Avoir des connaissances de base sur JSX.
• Avoir des connaissances de base sur l’utilisation d’un terminal de commande.
• Avoir des connaissances de base sur l’utilisation de NPM.

3 - Modalités, durée, horaires de la formation

3.1 - Modalités

Cette formation est dispensée dans un format distanciel.

Cette formation encadre un groupe de 1 à 20 stagiaires.

3.2 - Durée

• Durée totale en heures : 70 heures soit 10 jours.
• Durée totale en distanciel : 70 heures divisées en 10 sessions de 7 heures.
• Durée estimée du TP : 2 heures.
• Durée estimée de l’exercice de création autonome non noté : 7 heures.

3.3 - Horaires

• La plateforme permettant de récupérer les ressources du programme de formation est accessible 7j/7 et 24h/24.
• Le monitoring et l’assistance pédagogique sont disponibles : 
• • De 09h00 à 17h00 les jours suivants : lundi, mardi, mercredi, jeudi et vendredi.
• L’entrée dans la salle de formation s’effectuera à 09h00.
• La sortie de la salle de formation s’effectuera à 17h00.
• Les pauses intermédiaires se dérouleront de : 
• • 10h30 à 10h45 et de 15h00 à 15h15.
• La pause repas se déroulera de : 
• • 12h30 à 13h30

3.4 - Calendrier

• Dates de formation : Du 06/01/2025 au 17/01/2025.
• Dates et heures des présence :
• • Lundi 06/01/2025 - De 09h00 à 12h30 et de 13h30 à 17h00
  • Mardi 07/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Mercredi 08/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Jeudi 09/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Vendredi 10/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Lundi 13/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Mardi 14/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Mercredi 15/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Jeudi 16/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00
  • Vendredi 17/01/2025 - De 09h00 à 12h30 et de  13h30 à 17h00

4 - Modalités de suivi, d’accompagnement et d’assistance pédagogique

4.1 - Compétences et qualifications des encadrants pédagogiques

Un encadrant est dédié au suivi et à l’accompagnement des stagiaires.

Un encadrant aura la responsabilité de 25 stagiaires maximum.

4.2 - Compétences et qualifications du formateur responsable

Le formateur responsable pédagogique est Valérian Dufrène, gérant de Webdevoo, encadrant les activités suivantes : organisme de formation, développement web, auto-édition et e-commerce.

Formateur titulaire d’un titre “Développeur intégrateur en réalisation d’applications web”, délivré par la 3WAcademy (NSF 326t), de niveau III (FR) et 5 (EU), le 7 Novembre 2018.

Gérant d’un organisme de formation (Webdevoo Formation) depuis Juin 2023.

“Déclaration d’activité enregistrée sous le numéro 32800232680 auprès du préfet de région HAUTS-DE-FRANCE”

4.3 - Disponibilités et délais d'assistance des encadrants

L’encadrant est disponible : 

• De 09h00 à 12h30 et de 13h30 à 17h00

Il s’engage à assister le stagiaire dans un délai de 24h maximum (durant les jours ouvrés) si l’aide apportée n’est pas immédiate.

4.4 - Modalités techniques d’accès à la formation et d’accompagnement

• Des ressources utilisables lors de la formation peuvent être récupérées sur : https://www.webdevoo.fr/my/courses.php.
• L’utilisateur doit posséder une connexion internet haut débit (THD non requis).
• L’utilisation de la plateforme est optimale sous les systèmes d’exploitation : Windows, Linux, Mac, Android, Apple, et sur version mobile.
• L’utilisation de la plateforme est optimale sous les navigateurs : Google Chrome, Mozilla Firefox, Chromium, Microsoft Edge, Safari.
• L’apprenant doit être équipé d’un ordinateur fonctionnel lui permettant d’accéder à internet et ayant des caractéristiques adaptées pour l’utilisation des outils requis lors de la formation.
• Webdevoo Formation prend en charge les modalités techniques permettant un bon déroulé des sessions présentielles et distancielles.

4.4 - Modalités techniques d’assistance et d’interactions

Lors de la prise de contact, le message rédigé par l’apprenant sera expédié par e-mail à destination de l’adresse formation@webdevoo.com

Tout contact par email sera pris en compte dans les plus brefs délais et une réponse sera expédiée dans un délai de 48h maximum.

Si le lieu de formation possède une plateforme dédiée, cette dernière pourra être utilisée pour la prise de contact, avec l’autorisation des dirigeants.

5 - Méthodes et moyens pédagogiques

5.1 - Méthodes d’évaluation des prérequis

• Présentation orale détaillée.

5.2 - Méthodes pédagogiques

• Méthode expositive, par présentation de supports visuels et présentations détaillées.
• Méthode démonstrative, par des cas de mise en pratique.
• Méthode active, par incitation à la participation orale et la mise en pratique.

5.3 - Moyens pédagogiques

• Recherche d’éléments nécessaires dans la documentation.
• Support de cours distribué à chaque apprenant.
• QCM.
• Exercices.
• Étude de cas.
• TP.
• Projet fil rouge.
• Création libre (mise en pratique autonome sur une fonctionnalité précise).

5.4 - Ressources pédagogiques

Liste des ressources à disposition des stagiaires :

• Supports de cours.
• Présentations Google Slides.
• Documentation PDF.
• Fiches récapitulatives.
• Liens vers les documentations officielles de React et des librairies externes utilisées.

5.5 - Moyens techniques

• Mise en place d’une plateforme de centralisation des ressources, pour permettre aux apprenants de récupérer facilement les ressources importables pour la création des projets.
• Distribution électronique des supports de cours et des ressources permettant le suivi du contenu de formation.

5.6 - Dispositif d’évaluation au cours de la formation

Pour évaluer la progression du stagiaire, un TP sera réalisé par les apprenants, prenant la forme d’un QCM, le vendredi 17 Janvier 2025, de 09h00 à 11h00.

Un exercice autonome final, non noté, sera réalisé par les apprenants, le Jeudi 16 Janvier 2025, de 09h00 à 17h00.

L’objectif de cet exercice non noté est de permettre aux apprenants de déterminer leur niveau de progression réel, suite à la session de formation.

Cet exercice prendra également en compte l’autonomie de l’apprenant, quant à la potentielle mise en place d’éléments n’ayant pas été abordés durant la première semaine de formation.

Le projet fil rouge devra suivre une liste de critères précis, il permettra au formateur et à l’apprenant de jauger la progression globale dans le suivi de la formation.

5.7 - Dispositif d’évaluation après la formation

Le suivi de formation est géré par Webdevoo Formation.

6 - Modalités justifiant le suivi effectif de la formation par le stagiaire

• Copie des échanges, si effectifs, entre le stagiaire et l’encadrant.
• Justificatif des évaluations réalisées : QCM, TP, Projet fil rouge.
• Feuilles d’émargement signées lors des sessions présentielles ou appel enregistré électroniquement lors des sessions distancielles.

7 - Objectifs pédagogiques

7.1 - Objectifs pédagogiques partiels

À l’issue du chapitre 1, le stagiaire sera capable d’utiliser la documentation officielle de React, il sera capable de déterminer quelles librairies tierces peuvent être utilisées pour répondre au besoin d’un projet et saura expliquer l’utilité de React, pour la création d’applications cross-platform.

À l’issue du chapitre 2, le stagiaire sera capable de structurer un projet React, en suivant un design pattern exploité en entreprise, il saura comment mettre en place un système de routage pour créer une application multipage, il saura utiliser un contexte au sein de son application et expliquer son utilité .

À l’issue du chapitre 3, le stagiaire sera capable de découper les différentes parties de son application sous forme de composant, il comprendra l’importance de la réutilisation des composants pour alléger la logique de création de l'application, il sera en capacité d’utiliser une API open-source pour hydrater son application avec des données externes et il saura stocker ces données dans le stockage local du navigateur.

8 - Itinéraire pédagogique

Entrée en formation : Présentation du formateur et des apprenants

Format : Distanciel.

Heures : 0h30.

Définitions : 

• Présenter le formateur aux apprenants.
• Présenter les apprenants au formateur.
• Déterminer le niveau initial des apprenants.
• Déterminer le niveau de soutien requis pour la formation.

Objectif pédagogique partiel :

À l’issue de la présentation, l’apprenant :

• Aura connaissance de l’identité du formateur et de son bagage technique.
• Aura déterminé son niveau initial, avant de suivre le cursus de formation.
• Aura connaissance de l’identité des autres apprenants et de leur niveau (connaissance pouvant déterminer la complémentarité lors des exercices de groupe).

À l’issue de la présentation, le formateur :

• Aura connaissance de l’identité et du niveau initial des apprenants.
• Aura déterminé les besoins d’accompagnements des apprenants pour le démarrage de la formation.
• Aura les informations nécessaires pour proposer des exercices de groupe.

Chapitre 1 : Création du projet, via le terminal de commandes

Format : Distanciel.

Heures : 6,5h.

Définitions : 

• Installer les outils nécessaires au suivi de la formation.
• Configurer son environnement de développement.
• Découvrir l’utilité de React.
• Apprendre à utiliser les instructions NPM dans un terminal de commandes.
• Différencier les différents rôles de composants utilisés dans React.
• Connaître les points d’influence du référencement d’une application web.
• Prendre connaissance de l’objectif final du chapitre.

Objectif pédagogique partiel :

À l’issue du module 1, l’apprenant :

• Saura utiliser la documentation officielle de React.
• Saura déterminer quelles librairies tierces peuvent être utiles dans un projet.
• Sera en capacité d’expliquer l’utilité de l’environnement React, pour la création d’applications cross-platform.

Chapitre 2 : Structurer l’application

Format : Distanciel.

Heures : 28h.

Définitions : 

• Apprendre à structurer le dossier d’un projet React.
• Utiliser un design pattern pour faciliter le travail en équipe.
• Apprendre à faire communiquer deux composants entre eux.
• Apprendre à utiliser CSS avec un composant React.
• Apprendre à mettre en place un système de routage pour créer une application multi pages.
• Utiliser un contexte au sein de l’application pour centraliser les données.

Objectif pédagogique partiel :

À l’issue du module 2, l’apprenant :

• Sera capable de respecter un design pattern pour structurer son projet.
• Saura mettre en place un système de routage fourni par une librairie tierce.
• Saura expliquer l’utilité d’un système de routage.
• Saura mettre en place un contexte au sein de l’application.
• Aura connaissance de l’utilité d’un contexte.

Chapitre 3 : Hydrater l’application avec une API et utiliser le stockage local du navigateur

Format : Distanciel.

Heures : 28h

Définitions : 

• Savoir créer une structure complexe pour son application.
• Savoir déterminer un ordre logique des composants requis.
• Apprendre à créer des composants logiques.
• Étendre le fonctionnement des composants globaux.
• Maîtriser le découpage d’une application avec des composants.
• Apprendre à éviter la duplication de code.
• Savoir utiliser une API open-source pour obtenir des données.
• Apprendre à utiliser le stockage local et le stockage de session des navigateurs.

Objectif pédagogique partiel :

À l’issue du module 2, l’apprenant :

• Sera capable de structurer professionnellement son projet d’application.
• Saura déterminer un ordre logique pour avancer dans le développement d’une application complexe.
• Saura faire communiquer les composants avec un gestionnaire d’état général créé sur mesure, en fonction des besoins de l’application.
• Saura mettre en place des composants utilitaires et les intégrer dans son projet.
• Saura créer des composants personnalisés ayant une logique complexe.
• Saura hydrater son application avec les données d’une API externe.
• Saura stocker des données dans le stockage local et le stockage de session du navigateur.
• Sera en capacité de compiler une application.