Web

5$/h – React JS

Objectifs:

Au terme de ce cours, les personnes participantes pourront utiliser la bibliothèque React.js pour développer des interfaces utilisateurs Web interactives et performantes. 

Contenu du cours:

Introduction

• Objectifs de la formation
• Présentation de React et de ses avantages
• Prérequis et technologies complémentaires

Préparation de l’environnement

• Installation de Visual Studio Code
• Installation de Node.js
• Extensions utiles : Prettier, React Snippets
• Création et exécution d’une application React avec CREATE-REACT-APP

Rappels sur JavaScript Moderne

• Variables (var, let, const)
• Fonctions fléchées
• Déstructuration (destructuring)
• Paramètre rest et syntaxe spread
• Fonctions pures et immutabilité
• Exercices pratiques

Introduction à React

• Explications des composants de React
• SPA versus applications classiques
• Philosophie déclarative de React
• Structure d’une application React

JSX (JavaScript XML)

• Syntaxe JSX
• Expressions dans JSX
• Fragments
• Exercices pratiques

Composants

• Composants fonctionnels
• Propriétés : passage, lecture, déstructuration
• Composition de composants
• Conditionnels en JSX
• Exercices pratiques

Hooks

• Introduction aux Hooks
• useState : état local
• useEffect : effets secondaires et nettoyage
• useContext : partage de données entre composants
• Exercices pratiques

Routage, filtrage et pagination

• Introduction à REACT-ROUTER-DOM
• Ciblage des routes et composants associés
• Navigation entre pages
• Implémentation de filtrage dynamique
• Mise en œuvre d’une pagination simple
• Exercices

Formulaires et objets spéciaux (refs)

• Création de formulaires contrôlés
• Gestion des événements de saisie et soumission
• Validation des formulaires
• Utilisation des objets spéciaux pour accéder aux éléments DOM
• Exercices pratiques

Appels API avec Axios

• Présentation de Axios
• Requêtes GET, POST, PUT, DELETE
• Gestion des erreurs
• Affichage dynamique des données
• Exercices pratiques avec JSONPlaceholder

Authentification et autorisation avec JWT

• Concepts : identification, autorisation, rôles
• Stockage et gestion du JWT
• Appels API sécurisés
• Affichage UI conditionnel selon les rôles
• Routes protégées et redirections
• Exercices pratiques : projets backend/frontend GitHub

Projet final – Application avec interface et serveur (fullstack)

• Développement d’une application React
• Déploiement dans le nuage (Netlify, Vercel ou autre)

Préalables

• Posséder une bonne connaissance de JavaScript. 

• Avoir un ordinateur personnel muni d’une caméra et d’un microphone ainsi qu’une bonne connexion Internet pour la formation à distance.