Compétences Visées:

• Utiliser les langages de balisage html et css (avec et sans framework) pour intégrer les maquettes graphiques en utilisant un éditeur de code.
• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.

Module 1: Introduction à React.js

• Concepts de base et histoire de React 
• Installation et configuration de l’environnement de développement 
• Introduction à JSX et au Virtual DOM 
• Création de premiers composants React

Compétences Visées:

• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.
• Produire l’encodage en tenant compte des différentes contraintes imposées par les différentes résolutions d’écrans et les navigateurs afin d’obtenir un affichage optimisé pour smartphones, tablettes et desktop.

Module 2: Composants et Props

• Comprendre les composants fonctionnels et de classe 
• Gestion des props pour la communication entre composants 
• Structuration d’une application React 
• Exercices pratiques de création de composants 
• Différences entre les résolutions d’écran (tablette, smartphone, desktop)

Compétences Visées:

• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.
• Travailler sur une logique d’intégration réutilisable, organisée et synthétique, à des fins de lisibilité et de performances, en utilisant un système de “classes” génériques et fonctionnelles.

Module 3: State Management et Lifecycle Methods

• Utilisation du state dans les composants React 
• Comprendre et utiliser les méthodes de cycle de vie des composants 
• Gestion des événements et formulaires 
• Exercices pratiques sur le state et les lifecycle methods

Module 4: React Hooks

• Introduction aux hooks dans React 
• Utilisation des hooks useState, useEffect, et autres hooks personnalisés 
• Refactorisation des composants de classe en composants fonctionnels avec hooks 
• Projets pratiques impliquant l’utilisation des hooks 
• Validation des intéractions avec les formulaires

Compétence Visée: Valider les saisies utilisateurs dans les formulaires afin de vérifier l’échange de données entre l’utilisateur et le serveur à l’aide de méthodes de validation adaptées. (ex : expressions régulières)

Module 4: React Hooks

• Introduction aux hooks dans React 
• Utilisation des hooks useState, useEffect, et autres hooks personnalisés 
• Refactorisation des composants de classe en composants fonctionnels avec hooks 
• Projets pratiques impliquant l’utilisation des hooks 
• Validation des intéractions avec les formulaires

Compétences Visées:

• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.
• Travailler le référencement naturel d’un site internet tout au long de sa construction pour optimiser son positionnement en appliquant les recommandations pour les différents moteurs de recherche.(hiérarchisation des contenus, sémantique, poids des pages…)

Module 5: Routing avec React Router

• Configuration et utilisation de React Router 
• Création de routes et navigation dans une SPA 
• Gestion des paramètres de route et de l’authentification 
• Projet de création d’une application multi-pages
• Le référencement naturel d’un site internet

Compétences Visées:

• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.
• Développer des fonctionnalités mettant en jeu des requêtes asynchrones avec le serveur afin d’apporter de la fluidité et de l’interactivité sans rechargement de page en utilisant des API.

Module 6: Gestion de l’État Global avec Redux/Context API

• Principes de Redux et architecture Flux 
• Mise en place d’un store Redux et connexion avec React 
• Introduction à la Context API pour la gestion de l’état 
• Développement d’applications avec gestion d’état complexe

Compétence Visée: Considérer la diversité des publics, notamment en situation de handicap, afin d’améliorer l’expérience utilisateur, en mobilisant les différentes normes d’accessibilité. (Ex: RGAA)

Module 7: Considérer la diversité des publics afin d’améliorer l’expérience utilisateur (RGAA)

• Introduction à RGAA et les notions de l’accessibilité numérique
• Détecter les erreurs d’accessibilité d’un site web simple
• Concevoir une solution de correction
• Restituer aux parties prenantes d’un site web les impacts des défauts d’accessibilité sur les personnes handicapées

Compétences Visées:

• Enrichir l’interface de l’application ou du site internet en utilisant le langage JavaScript afin d’apporter à la partie front end de l’interactivité et des animations.
• Optimiser les temps de développement en utilisant des ressources externes (librairies JavaScript) pour résoudre des problématiques de développement complexes.

Module 8: Tests et Déploiement

• Introduction aux tests unitaires et d’intégration avec Jest et React Testing Library 
• Tests de composants React 
• Stratégies de déploiement des applications React 
• Optimisation des performances et SEO pour les applications React

Mise en situation professionnelle – Projet Final:

• Application des compétences acquises dans un projet concret
• Développement, test, et présentation orale du projet