Formation ReactJS

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

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

LES PROPS

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

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

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

SYNTAXE DES ÉVÈNEMENTS DANS LE JSX

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

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

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
• Utilisation avec les Hooks useSelector et useDisptach

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

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

BONNES PRATIQUES DE DEVELOPPEMENT EN REACT