A l'issue de cette formation, vous serez capable de :

• Vous familiariser avec la syntaxe et les fonctionnalités ES6
• Présenter les principes de base du framework ReactJS
• Expliquer la syntaxe JSX, la définition et l'intérêt des composants
• Décrire le concept de props (propriétés) et leur utilisation
• Présenter le fonctionnement de la navigation avec React et le router react-router-dom
• Présenter les Hooks
• Gérer les évènements et rendu conditionnel dans le JSX
• Créer des listes, utiliser des fragments et gérer les formulaires avec React
• Décrire le concept de Redux
• Expliquer les perspectives et mettre en oeuvre les bonnes pratiques.

Jour 1 - Matin

Introduction et rappels ES6

• Outils et IDE (Integrated Development Environment)
• L'extension du navigateur React Developer Tools
• Packaging, npm
• Transpiler ECMAScript
• Syntaxe ES6 : let, const, classes, interfaces, modules, fonctions arrow

Exemples de travaux pratiques (à titre indicatif)

• Installation des outils et IDE
• Rappels sur la syntaxe ES6

Le framework ReactJS

• Principes de base et comparaison avec les autres frameworks
• Philosophie "composant"
• Workflows de développement : from scratch, intégration à une application Web existante, utilisation de Create React App
• Le DOM virtuel et la réconciliation

Le JSX et les composants

• Définition d'un élément React
• Liaison avec le DOM (ReactDOM.render())
• Syntaxe JSX
• Les composants : définition et intérêt
• Composants en mode classe et composants fonctionnels
• Imbrication de composants

Exemples de travaux pratiques (à titre indicatif)

• Création d'un composant de base
• Imbrication de composants

Jour 1 - Après-midi

Les props

• Définition des props et transmission de données
• Accéder aux props
• La props.children

Exemple de travaux pratiques (à titre indicatif)

• Utilisation des props dans un composant

Le routing et la navigation

• Construire une SPA (Single Page Application) avec react-router-dom (version 6)
• Le router, les liens, les routes, le switch
• Les paramètres d'URL et les navigations imbriquées

Exemples de travaux pratiques (à titre indicatif)

• Mise en place du routing et navigation dans l'application

Les Hooks

• Définition et comparaison avec les composants en mode "classe"
• Hooks d'état (useState) et d'effet (useEffect)
• Règles des Hooks et custom Hooks

Exemples de travaux pratiques (à titre indicatif)

• Conversion d'un composant en mode "classe" en composant fonctionnel avec Hooks
• Gestion des évènements et rendu conditionnel

Jour 2 - Matin

Syntaxe des évènements dans le JSX

• Gestion des méthodes d'évènement (handlers)
• Contenu conditionnel et raccourcis (opérateur &&, opérateur ternaire)

Exemples de travaux pratiques (à titre indicatif)

• Gestion des évènements et rendu conditionnel dans un composant
• Listes, fragments et formulaires

Listes et raccourcis (map, filter)

• Les clés (key) et le DOM virtuel
• Les fragments
• Etat du composant et composants contrôlés
• Gestion des formulaires et refs

Exemples de travaux pratiques (à titre indicatif)

• Création d'une liste avec des données et gestion d'un formulaire

Jour 2 - Après-midi

Immutabilité des variables partagées

• Problème de la gestion d'état
• Les actions, les reducers et le store
• Utilisation avec React (react-redux)
• Le composant Provider
• Les containers
• Introduction à Redux et Zustand
• Utilisation avec les Hooks useSelector et useDisptach

Exemples de travaux pratiques (à titre indicatif)

• Intégration de Redux dans l'application
• Chapitre d'ouverture : perspectives et bonnes pratiques

Jour 3 - Matin

Introduction aux tests unitaires

• Le framework Jest (setup, teardown, describe, it)
• La React Testing Library (cleanup, render, fireEvent)

React Native : aperçu et utilisation pour le développement d'applications mobiles

Jour 3 - Après-midi

Server Side Rendering (SSR) : avantages et cas d'utilisation

Bonnes pratiques de développement en React