Please enable JavaScript.
Coggle requires JavaScript to display documents.
Développement front-end avec React., Systéme d'apprentissage, 7182723…
Développement front-end avec React.
Séquence 1: Introduction générale d'une application en React
Objectifs spécifiques
:check:Identifier les éléments essentiels d'un processus de développement front-end avec React
:check:Distinguer les différentes phases d’un projet React
:check:Définir la structure d'une application React
Ressources
https://react.dev/learn
Documents.pdf
https://web.stanford.edu/class/cs142/lectures/ReactJS.pdf
https://cs.brown.edu/courses/csci1300/fall2018/labs/React_Lab_Handout.pdf
Durée:
1,5 heures
Les activités d'apprentissages
Activité1
Objectifs opérationnels
4 more items...
Livrable:
fichier pdf
Type de l'activité:
individuelle
Mode d'évaluation
Type:
sommative
Critère:
setup et code correct
Ressources:
https://react.dev/learn
Durée:
45min
Matériels requis
Node.js,
Visual Studio Code ou un autre éditeur de code
Rôle des acteurs
Apprenant
1 more item...
Tuteur
1 more item...
Acteurs
Tuteur
Apprenant
Activité2
Objectifs opérationnels
4 more items...
Livrable:
fichier zip du projet React créé
Type de l'activité:
individuelle
Mode d'évaluation
Type:
sommative
Critère:
projet fonctionnel et structure correcte
Ressources:
https://react.dev/learn/start-a-new-react-project
Acteurs
Apprenant
Tuteur
Durée:
45min
Matériels requis
Visual Studio Code ou un autre éditeur de code
Chrome ou un autre navigateur web
Rôle des acteurs
Apprenant
1 more item...
Tuteur
1 more item...
Activité de consolidation:
QCM
Séquence 2:
Composants et JSX en React
https://react.dev/learn/your-first-component
Documents pdf
https://www.tutorialspoint.com/reactjs/reactjs_tutorial.pdf
https://legacy.reactjs.org/tutorial/tutorial.html
Objectifs spécifiques
:check: Identifier les types de composants en React (fonctionnels et de classe)
:check: Distinguer les différences entre JSX et HTML
:check: Définir comment utiliser les composants pour structurer une interface
Les activités d'apprentissages
Activité1
Objectifs opérationnels
1 more item...
Type de l'activité:
individuelle
Livrable:
fichier pdf
Durée:
45min
Ressources:
https://react.dev/learn/your-first-component
Mode d'évaluation
2 more items...
Matériels requis
1 more item...
Rôle des acteurs
2 more items...
Acteurs
2 more items...
Activité2
Objectifs opérationnels
4 more items...
Livrable:
fichier zip du projet React avec le composant créé
Type de l'activité:
individuelle
Ressources:
https://react.dev/learn/writing-markup-with-jsx
Durée:
45min
Mode d'évaluation
2 more items...
Acteurs
2 more items...
Matériels requis
2 more items...
Rôle des acteurs
2 more items...
Durée:
1,5 heures
Activité de consolidation:
QCM
Titre :
Développement front-end avec React.js
Ressources :
https://react.dev/learn#forms
https://react-hook-form.com/
https://blog.logrocket.com/complete-guide-building-smart-data-driven-react-forms/
https://blog.logrocket.com/complete-guide-building-smart-data-driven-react-forms/
Durée :
30h + 30TD.
Public cible :
2ème année licence en informatique ou développeurs débutants avec des bases en développement web
Modalité d'évaluation :
Sommative
Prérequis :
Connaissances de base en HTML et CSS, JavaScript (ES6 : arrow functions, destructuring, modules), notions de NPM et Git.
Enseignement :
Hybride
Un exercice :
sur la gestion d'état avec useState et les hooks de base
Un exercice :
sur l'utilisation de JSX pour intégrer du HTML dans du JavaScript
Un exercice :
sur la création de composants fonctionnels
Si :red_cross:
échec
, accès au cours
Si :check:
réussite
, orientation vers un autre module
Un exercice
sur les bases de JavaScript (manipuler des tableaux, objets et fonctions ES6)
Un exercice
sur la manipulation du DOM en JS (sélectionner et modifier des éléments HTML)
Si :check:
réussite
: accès au cours
Si :red_cross:
échec
: module de rattrapage
À la fin de ce cours l'apprenant sera en mesure de :
:check: Comprendre les concepts fondamentaux de React.js, y compris les composants, les props, l'état et les hooks pour créer des interfaces utilisateur dynamiques.
:check: Composer des composants pour développer des applications front-end interactives et réutilisables
:check: Gérer les événements, les cycles de vie et l'état dans des projets React pour une meilleure performance et maintenance.
Post-test
Durée:
2h
Type d'activité:
Activité individuelle
Mode d'évaluation :
l'évaluation est sommative. Elle est préparée par le tuteur et comprend des questions QCM et un problème portant sur tous les objectifs généraux de la formation, tels que la création d'une petite application React intégrant des composants, JSX, et une structure de base.
Critères d'évaluation:
:star: Admis lorsqu'il détient au moins la moitié des objectifs c'est à dire s'il obtient 50% de la note totale.
:no_entry: N'est pas Admis il doit passer au module rattrapage:
Pistes de remediation
:check: Une réunion synchrone pour répondre aux questions et résoudre certaines défaillances. Les apprenants peuvent aussi consulter le forum pour poser les questions auxquelles le tuteur va répondre dans un délai de 24h
:check: Les apprenants qui vont passer la session de rattrapage peuvent consulter la correction du post-test déposée sur la plateforme où ils vont trouver aussi les ressources nécessaires pour chaque objectif défaillant, comme des tutoriels React supplémentaires ou des exemples de code.
Systéme d'apprentissage
Ressources
Système de sortie
Système d'entrée
Test Pré-requis
PréTest
Objectifs généraux
Description du cours
