Formation Développement Applications Web Modernes avec React : Maîtrisez le Front-End

Programme de la formation
Développement Applications Web Modernes avec React : Maîtrisez le Front-End

• Introduction à React et l'écosystème JavaScript

  - Présentation de React : histoire, principes clés (composants, JSX).
  - L'environnement de développement : Node.js, npm/yarn, éditeurs de code.
  - Concepts fondamentaux de JavaScript ES6+ essentiels pour React.

• Premiers pas avec les composants React

  - Création d'une application React avec Create React App.
  - Structuration de projet et nomenclature.
  - Composants fonctionnels vs. composants de classe (introduction).

• JSX et rendu conditionnel

  - Syntaxe JSX : intégration de JavaScript dans HTML.
  - Rendu d'éléments et de listes.
  - Rendu conditionnel et boucles.

• Gestion de l'état local et des événements

  - Introduction au hook `useState` pour la gestion de l'état.
  - Manipulation d'événements : onClick, onChange, onSubmit.
  - Mise à jour de l'état et re-rendu des composants.

• Props et communication entre composants

  - Passage de données via les props (propriétés).
  - Composants parents et enfants : flux de données unidirectionnel.
  - Prop drilling : introduction et limites.

• Le cycle de vie des composants et effets secondaires

  - Comprendre le cycle de vie d'un composant fonctionnel avec `useEffect`.
  - Réalisation d'effets secondaires : appels API, souscriptions.
  - Nettoyage des effets (`cleanup function`).

• Gestion de formulaires et validations
• Routage avec React Router

  - Introduction à React Router pour la navigation SPA.
  - Définition de routes, liens et paramètres d'URL.
  - Redirections et routes imbriquées.

• Consommation d'APIs et gestion des données asynchrones

  - Fetch API et Axios pour les requêtes HTTP.
  - Gestion des états de chargement, d'erreur et de succès.
  - Affichage de données dynamiques provenant d'une API REST.

• Hooks avancés et optimisation des performances

  - `useContext` pour la gestion de l'état global simple.
  - `useReducer` pour des états complexes.
  - `useCallback`, `useMemo` pour l'optimisation des performances.

• Introduction à la gestion globale de l'état (Redux/Zustand)

  - Besoins en gestion d'état global complexe.
  - Présentation de Redux ou Zustand : principes et avantages.
  - Mise en œuvre d'un store simple et connexion aux composants.

• Déploiement et bonnes pratiques React

  - Introduction au déploiement d'une application React (Netlify/Vercel).
  - Bonnes pratiques de code : Linting, formatage (ESLint, Prettier).
  - Composants réutilisables et architecture solide.