Please enable JavaScript.

Coggle requires JavaScript to display documents.

React JS : - Coggle Diagram

- - - - Durée : 2 H
      - Les activités d'apprentissage
        
        Activité 1 :
        
        Objectifs Opérationnels: Installation de l'environnement
        
        Type d'activité : individuelle
        
        Mode d'évaluation
        
        Type : sommative
        
        Critère : installation de enivrement (Node.js et npm.)
        
        Acteurs
        
        Tuteur
        
        Apprenant
        
        Rôle des acteurs
        
        Tuteur
        
        orienter les apprenants, en expliquant les étapes pour installer Node.js, npm, et Create React App
        
        répondant aux éventuelles questions pour garantir une configuration correcte.
        
        Apprenant
        
        L'apprenant doit suivre attentivement les instructions pour installer Node.js, npm et Create React App
        
        explorer la structure du projet généré, lancer l'application et comprendre le code source initial.
        
        Matériels requis : Visual Studio Code , ordinateur avec internet
        
        Durée : 30 min
        
        Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html
        
        Activité 2
        
        Objectifs opérationnels: Créer un composant React simple, l'intégrer dans une application, et démontrer la gestion de l'état et des événements, permettant une évaluation claire de la compréhension pratique des concepts de base de React par les apprenants.
        
        Description : À la fin de l'activité, les étudiants seront capables de faire un bouton interactif dans une application React, montrant comment React gère les interactions et les changements d'état.
        
        Acteurs
        
        Tuteur
        
        Apprenant
        
        Role des Acteurs
        
        Tuteur
        
        guider les apprenants dans la création d'un composant React
        
        faciliter la compréhension des concepts de gestion de l'état et des événements
        
        offrir un soutien pour garantir que chaque étudiant atteint les objectifs spécifiques de l'activité
        
        Apprenant
        
        créer et d'intégrer un composant bouton interactif en utilisant React
        
        la maîtrise des concepts fondamentaux tels que la gestion de l'état et des événements.
        
        Type d'activité : individuelle
        
        Durée : 45 min
        
        Étapes d'activite
        
        Création du Composant
        
        Manipulation de l'État
        
        Configuration du Projet
        
        Gestion d'Événements
        
        Objectif Pédagogique : Cette activité permettra aux apprenants de comprendre les concepts de base de React en pratiquant la création de composants, la gestion de l'état, et la manipulation des événements, établissant ainsi une base solide pour des concepts plus avancés.
      - Ressources : fr.legacy.reactjs.org
      - Activité de consolidation : des exercices
      - Objectifs spécifiques : compris la création de composants réutilisables et la gestion efficace de l'état, afin de permettre aux développeurs de construire des interfaces utilisateur dynamiques et réactives.
    - - Ressources : fr.legacy.reactjs.org
      - Durée: 3 H
      - Objectifs spécifiques: Maîtriser l'utilisation du Hook use State pour la gestion de l'état local, et explorer les solutions de gestion de l'état global
      - Activités de consolidation :: créant des projets concrets qui impliquent des mises à jour d'état dynamiques
      - Les activités d'apprentissage
        
        Activité1
        
        Type de l'activité : individuelle
        
        Matériels requis : éditeur [Visual Studio Code
        
        Objectifs opérationnels :Comprendre comment utiliser l'état local dans un composant React en utilisant les Hooks.
        
        Durée : 1.30h
        
        Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html
        
        Rôle des acteurs
        
        Apprenant
        
        Communiquer avec le tuteur ainsi qu’avec les autres apprenants
        via le forum et le chat
        
        Consulter, télécharger, imprimer le cours
        
        S’auto évaluer; faire des exercices et les déposer à l'espace de
        dépôt
        
        Tuteur
        
        Assister les apprenants lors de la formation et les conseiller.
        
        Contrôler les apprenants (respect des délais, temps passé dans
        la lecture du cours et la réalisation des exercices
        
        Planifier des rencontres synchrones périodiques
        
        Mode d'évaluation
        
        Critère : Code correcte
        
        Type :Sommative
        
        objectifs pédagogiques : Comprendre et appliquer efficacement les concepts de gestion de l'état dans React, notamment l'utilisation des Hooks, l'intégration de Redux, et l'évaluation des approches pour optimiser le développement
    - - Les activités d'apprentissage
        
        Activite1
        
        Rôle des acteurs
        
        Tuteur
        
        Contrôler les apprenants (respect des délais, temps passé dans
        la lecture du cours et la réalisation des exercices, etc.)
        
        Apprenant
        
        S’auto évaluer; faire des exercices et les déposer à l'espace de
        dépôt
        
        Communiquer avec le tuteur ainsi qu’avec les autres apprenants
        via le forum et le chat
        
        Consulter, télécharger, imprimer le cours
        
        Durée : 45 min
        
        Matériels requis : éditeur [Visual Studio Code]
        
        Objectifs opérationnels : Maîtriser les étapes du cycle de vie des composants React et les appliquer dans la création d'une application simple.
        
        Acteurs
        
        Apprenant
        
        Tuteur
        
        Type de l'activité : Individuelle
      - Activités de consolidation : des exercices
      - Objectifs spécifiques: Comprendre le cycle de vie des composants React afin d'optimiser la gestion des états et des effets dans une application.
      - Durée: 3h
      - Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html
    - - Objectifs spécifiques : Comprendre l'implémentation de la gestion de l'état global dans React, en utilisant le Contexte ou Redux, pour faciliter le partage d'informations entre composants et optimiser la gestion d'état à l'échelle de l'application.
      - Durée: 3h
      - Activités de consolidation : des exercices
      - Les activités d'apprentissage
        
        Activité 1
        
        Objectifs spécifiques : Comprendre le concept de gestion de l'état global en utilisant le Contexte dans React.
        Acquérir des compétences pratiques pour partager et consommer l'état global entre différents composants.
        
        Type de l'activité : Individuelle
        
        Durée : 45 min
        
        Matériels requis : éditeur [Visual Studio Code]
        
        Acteurs
        
        Tuteur
        
        Apprenant
        
        Rôle des acteurs
        
        Tuteur
        
        Assister les apprenants lors de la formation et les conseiller.
        
        Contrôler les apprenants (respect des délais, temps passé dans
        la lecture du cours et la réalisation des exercices
        
        Apprenant
        
        Communiquer avec le tuteur ainsi qu’avec les autres apprenants
        via le forum et le chat
        
        Consulter, télécharger, imprimer le cours
    - - Compétence visée : Être capable d'intégrer et de gérer des opérations de communication HTTP, comme la récupération et l'envoi de données, pour créer des applications React dynamiques et interactives.
      - Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html
      - Objectif opérationnel : Maîtriser la réalisation de requêtes HTTP dans une application React en utilisant des bibliothèques telles que Axios, afin d'échanger des données avec des serveurs distants de manière asynchrone.
      - Durée: 3h
      - Activités de consolidation : des exercices
      - Les activités d'apprentissage
        
        Avtivité
        
        Objectif opérationnel :Comprendre comment effectuer des requêtes HTTP dans une application React.
        Acquérir des compétences pratiques pour récupérer et afficher des données externes dans une application.
        
        Type de l'activité : Individuelle
        
        Matériels requis : éditeur [Visual Studio Code]
        
        Durée : 45 min
        
        Acteurs
        
        Tuteur
        
        Apprenant
        
        Rôle des acteurs
        
        activité
        
        Type de l'activité : Individuelle
        
        Matériels requis : éditeur [Visual Studio Code]
        
        Objectif opérationnel Cette activité permettra aux apprenants de maîtriser l'intégration des requêtes HTTP dans une application React, un aspect crucial pour la création d'applications interactives et dynamiques.
        
        Durée : 45 min
        
        Rôle des acteurs
        
        Tuteur
        
        3 more items...
        
        Apprenant
        
        3 more items...
        
        Acteurs
        
        2 more items...
        
        QCM
        
        Livrable: : Fichier pdf
        
        Type de l'activité : Individuelle
        
        Objectifs opérationnels : Des QCM pour évaluer la compréhension
        des étudiants
        
        Durée :30min
        
        Matériels requis : Ordinateur
        
        Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html
        
        Rôle des acteurs
        
        Apprenant
        
        3 more items...
        
        Tuteur
        
        1 more item...
    - - Durée : 3 H
      - Objectifs spécifiques :
        Apprenez différentes méthodes pour déployer votre application React, que ce soit sur des services d'hébergement statique
      - Ressources : https://fr.legacy.reactjs.org/docs/getting-started.html