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

• Se familiariser avec la syntaxe et les fonctionnalités avancées d'ES6.
• Comprendre les principes de base du framework ReactJS.
• Maîtriser la syntaxe JSX et la création de composants réutilisables.
• Utiliser les props pour transmettre des données entre composants.
• Implémenter la navigation et le routage avec react-router-dom.
• Découvrir et appliquer les Hooks dans les composants fonctionnels.
• Gérer les événements et le rendu conditionnel dans le JSX.
• Créer et manipuler des listes, utiliser les fragments et gérer les formulaires avec React.
• Comprendre les concepts de Redux pour la gestion de l'état global de l'application.
• Appliquer les bonnes pratiques et anticiper les évolutions futures avec ReactJS.

Public cible :

• Développeurs web souhaitant créer des applications en utilisant ReactJS.

Pré-requis :

• Solide connaissance de JavaScript et de ses fonctionnalités avancées.

Introduction et rappels sur ES6

• 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.

Découverte de ReactJS

• 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.

Le JSX et les composants

• 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.

Les Props

• 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.

Le routage et la navigation

• 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.

Les Hooks

• 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.

Gestion des événements et rendu conditionnel

• 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.

Listes, fragments et formulaires

• 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.

Gestion de l'état avec Redux

• 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.

Perspectives et bonnes pratiques

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

Introduction aux tests unitaires

• 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.

Rendu côté serveur (Server-Side Rendering - SSR)

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

Examen (en option)

• 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.

• Formation disponible en présentiel ou à distance (classe virtuelle, e-learning, blended learning).
• Méthodes pédagogiques interactives : démonstrations, questionnements, travaux pratiques et mises en situation.
• Supports pédagogiques complets : documents de cours, exercices pratiques, études de cas.
• Environnements de formation configurés sur les postes de travail ou accessibles en ligne.

Équipement requis :

• Ordinateur avec micro, son et caméra (optionnel)
• Connexion internet
• L’outil Zoom sera utilisé pour la partie Visio-Conférence.‍

‍

• Suivi continu via des exercices pratiques et des mises en situation.
• Évaluations formatives pour mesurer la progression des participants.
• Questionnaire d'auto-évaluation en fin de formation pour valider les acquis.

Remise d'une attestation de fin de formation par Elitek.

• Taux de satisfaction : nous disposons d'un nombre insuffisant de données

‍