8.1 – Découvrir React

🏆 Compétence cible

C8 – Comprendre la structure d’une application front-end avec React (10h – Niveau 1) L’apprenant doit être capable de découvrir les concepts de base de React, de créer des composants fonctionnels simples et de gérer l’état local pour des interfaces interactives.

🧩 Micro-compétence

8.1 – Découvrir React (10h) Explorer la structure d’un projet React, comprendre l’utilisation des composants, des props et de l’état local, et naviguer entre plusieurs vues simples.

📝 Description de l’autoformation

Cette autoformation introduit React, une bibliothèque JavaScript moderne pour la création d’interfaces dynamiques. L’apprenant découvrira la structure d’un projet React, apprendra à créer des composants, à utiliser les props et à gérer l’état avec useState. Une première approche de la navigation entre vues sera également abordée.

UA 8.1.1 – Comprendre les composants React

  1. 🎯 Objectif global

    • Découvrir la structure d’un projet React et apprendre à créer des composants fonctionnels.

  2. 📚 Liste des chapitres

    • Chapitre 1 : Structure d’un projet React (Vite ou CRA) (1h).
    • Chapitre 2 : Créer un composant fonctionnel (1.5h).
    • Chapitre 3 : Utiliser les props et JSX (1.5h).

  3. 📄 Livrable attendu

    • Créer une application React simple affichant une liste d’articles via un composant parent et des composants enfants.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Comprendre la structure d’un projet React.
    • Niveau 2 : Créer des composants avec props et JSX.
    • Niveau 3 : Structurer une application en composants réutilisables.

UA 8.1.2 – État local et navigation simple

  1. 🎯 Objectif global

    • Apprendre à gérer l’état local d’un composant avec useState et implémenter une navigation basique entre plusieurs vues.

  2. 📚 Liste des chapitres

    • Chapitre 4 : Gérer l’état avec useState (2h).
    • Chapitre 5 : Réagir aux événements utilisateur (2h).
    • Chapitre 6 : Navigation entre vues avec react-router-dom (2h).

  3. 📄 Livrable attendu

    • Développer une petite application React avec un formulaire interactif et une navigation entre deux pages.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Mettre en place un état local simple.
    • Niveau 2 : Réagir aux événements et modifier l’état en conséquence.
    • Niveau 3 : Créer une navigation basique entre plusieurs composants/pages.

Table of contents