Formation ReactJS

• Rappels JavaScript ES6

• Variables (let, const)

• Fonctions fléchées

• Classes et modules

• Mise en place de l’Environnement de Travail

• Installation de VS Code, Node.js et npm

• Création d’une première application avec Create React App

• Travaux Pratiques : Exercices sur les variables et fonctions ES6, création d’une première application simple avec React.

• Introduction à React

• Principes de base de React et ses avantages

• Syntaxe JSX : écrire du HTML dans JavaScript

• Création de Composants

• Différence entre composants fonctionnels et composants de classe

• Création et affichage des premiers composants

• Travaux Pratiques : Création de composants simples pour afficher du contenu, introduction à JSX pour structurer les éléments.

• Introduction aux Props et à l’État (State)

• Transmettre des données entre composants avec props

• Utiliser useState pour gérer l’état local

• Gestion et Mise à Jour de l’Interface

• Props.children pour afficher du contenu imbriqué

• Mise à jour de l’état et rendu dynamique

• Travaux Pratiques : Création de composants interactifs qui affichent et modifient des données avec useState et props.

• Créer une Application Multi-pages

• Introduction à React Route pour gérer la navigation

• Mise en place des routes et liens entre pages

• Navigation et Paramètres d’URL

• Utilisation des routes dynamiques avec des paramètres

• Gestion de la navigation imbriquée

• Travaux Pratiques : Création d’une application à plusieurs pages avec des routes et paramètres d’URL.

• Gestion des Événements Utilisateur

• Gestion des clics et saisies dans le JSX

• Création de fonctions de gestion (handlers)

• Rendu Conditionnel

• Affichage conditionnel avec l’opérateur ternaire et &&

• Optimisation de l’affichage dynamique

• Travaux Pratiques : Création de boutons interactifs et affichage conditionnel selon l’état des composants.

• Travailler avec des Listes

• Afficher une liste d’éléments avec map

• Interagir avec des APIs

• Créer des graphes pour la visualisation des données

• Importance des clés (key) pour optimiser React

• Gestion des Formulaires

• Création de formulaires avec des composants contrôlés

• Utilisation des refs pour accéder au DOM

• Travaux Pratiques : Création d’une liste dynamique d’éléments et d’un formulaire pour ajouter des éléments.

• Les Hooks dans React

• Découverte de useEffect pour les effets de bord

• Différence entre Hooks et composants de classe

• Organisation et bonnes pratiques

• Structurer et organiser son code React

• Introduction à la gestion d’état globale (ex. : Redux)

• Travaux Pratiques : Mise en place des Hooks dans une application, organisation du code pour une meilleure lisibilité.

• Tests et bonnes pratiques

• Introduction aux tests unitaires avec Jest

• Bonnes pratiques pour un code maintenable et lisible

• Révision et perspectives d’avenir

• Récapitulatif des principaux concepts et bonnes pratiques

• Perspectives et prochaines étapes d’apprentissage

• Travaux Pratiques : Exercice de révision et d’auto-évaluation pour valider les acquis de la formation.