ReactJS.
Développement d’Applications Web Performantes et Réactives.

• Présentation des outils et environnements de développement (IDE).
• Installation de l'extension React Developer Tools pour le navigateur.
• Gestion des packages avec npm.
• Utilisation de transpileurs pour ECMAScript.
• Rappel des nouveautés de la syntaxe ES6 : let, const, classes, interfaces, modules, fonctions fléchées.

Atelier pratique :

• Mise en place de l'environnement de développement.
• Exercices sur la syntaxe ES6.

• Comprendre les principes fondamentaux et comparer avec d'autres frameworks.
• Approche basée sur les composants.
• Différents workflows de développement : création from scratch, intégration dans une application existante, utilisation de Create React App.
• Fonctionnement du Virtual DOM et du processus de réconciliation.

• Définition d'un élément React.
• Liaison avec le DOM via ReactDOM.render().
• Utilisation de la syntaxe JSX.
• Comprendre les composants : définition et avantages.
• Différence entre composants de classe et fonctionnels.
• Imbrication et composition de composants.

Atelier pratique :

• Création d'un composant simple.
• Imbrication de plusieurs composants.

• Comprendre les props et la transmission de données aux composants.
• Accéder aux props dans les composants.
• Utilisation de props.children.

Atelier pratique :

• Manipulation des props dans un composant.

• Construire une Single Page Application (SPA) avec react-router-dom (version 6).
• Configuration du router, des liens, des routes et du switch.
• Gestion des paramètres d'URL et des navigations imbriquées.

Atelier pratique :

• Mise en place du routage et de la navigation dans l'application.

• Définition des Hooks et comparaison avec les composants de classe.
• Utilisation des Hooks d'état (useState) et d'effet (useEffect).
• Règles à respecter lors de l'utilisation des Hooks et création de Hooks personnalisés.

Atelier pratique :

• Conversion d'un composant de classe en composant fonctionnel utilisant les Hooks.

• Syntaxe des événements dans le JSX.
• Gestion des gestionnaires d'événements (handlers).
• Rendu conditionnel du contenu et utilisation des opérateurs logiques (&&, opérateur ternaire).

Atelier pratique :

• Gestion des événements et rendu conditionnel dans un composant.

• Création de listes et utilisation de méthodes comme map et filter.
• Importance des clés (key) pour optimiser le Virtual DOM.
• Comprendre et utiliser les fragments.
• Gestion de l'état des composants et des composants contrôlés.
• Manipulation des formulaires et utilisation des refs.

Atelier pratique :

• Création d'une liste à partir de données et gestion d'un formulaire.

• Comprendre l'immutabilité des variables partagées.
• Problèmes liés à la gestion de l'état dans les applications complexes.
• Concepts d'actions, de reducers et de store.
• Intégration avec React via react-redux.
• Utilisation du composant Provider.
• Introduction à Redux et Zustand.
• Utilisation des Hooks useSelector et useDispatch.

Atelier pratique :

• Intégration de Redux dans l'application pour gérer l'état global.

• Discussion sur les perspectives futures de ReactJS.
• Mise en œuvre des bonnes pratiques de développement.

• Présentation du framework Jest : configuration, cycles de vie des tests (setup, teardown), structure des tests (describe, it).
• Utilisation de React Testing Library : nettoyage (cleanup), rendu (render), simulation d'événements (fireEvent).
• Aperçu de React Native pour le développement d'applications mobiles.

• Avantages du SSR et cas d'utilisation.
• Bonnes pratiques pour le développement avec ReactJS.

• Possibilité de passer un examen pour valider les acquis (coût supplémentaire).
• L'examen se déroule en ligne le dernier jour de la formation.
• Il s'agit d'un QCM d'environ 1h30 attestant du niveau de compétence.
• L'examen n'est pas éligible au CPF, mais permet de valider officiellement les compétences acquises.

Note : Le contenu de ce programme peut être ajusté en fonction des niveaux, prérequis et besoins des participants.