Formation React

Public concerné

Développeur front-end et/ou Intégrateur

Niveau requis

Connaissances web HTML/CSS et débutants en programmation Javascript

Programme

• PARTIE 1 Exo Sondage
• PARTIE 2 Exo Todolist
• PARTIE 3 Exo Météo
• PARTIE 4 Exo Movies
• PARTIE 5 Présentation de la formation React
• React c'est quoi ?
• Qu'est ce qu'est une SPA
• Spécificités de React
• Prérequis pour suivre la formation (HTML/CSS et Javascript)
• Déroulement de la formation
• Apprendre à apprendre, la compétence clé à acquérir pour un développeur
• PARTIE 6 Introduction/Découverte de React
• Installer React et son environnement de développement (node, npm etc)
• Créer un projet avec React Create App
• Comprendre les fichiers de base d'un projet React
• Installer les outils de débug React
• Révisions Javascript moderne ES6
• PARTIE 7 Les bases de React
• React et ReactDOM
• Découverte de JSX
• Utilisation du JSX
• Créer son premier composant React
• Composant fonctionnelle sans état (stateless)
• Composant de class avec état (stateful)
• Composer plusieurs composants
• Les props, une notion essentielle de React
• Le state
• Modifier le state
• PARTIE 8 React et le CSS
• Les problématiques du CSS avec React et les solutions pour les résoudre
• React et le CSS
• React et SCSS
• React et Bootstrap
• CSS inline
• styled-component
• PARTIE 9 Comprendre la logique de React
• Passer une information d'un composant parent à un composant enfant
• Gestion du this : Bind ou Arrow function
• Les props de rendu : Passer une fonction dans les props
• Gérer les événements avec React
• Faire remonter une information d'un composant enfant vers un composant parent
• Ref : createRef
• Ref : forwardRef
• PARTIE 10 Cycle de vie des composants
• Le cycle de vie React c'est quoi ?
• Phase de montage d'un composant : componentDidMount
• Phase de mise à jour d'un composant : componentDidUpdate
• Phase de démontage d'un composant : componentWillUnmount
• La méthode getDerivedStateFromProps
• La méthode shouldComponentUpdate
• La méthode getSnapshotBeforeUpdate
• PARTIE 11 Développer avec React
• Affichage conditionnelle
• Rendre une liste
• Utiliser et comprendre les keys de React
• Afficher une image avec React
• Default props
• PARTIE 12 Gestion des formulaires
• Comment marche la gestion des formulaires avec React
• Gestion des formulaires : input non contrôlé
• Gestion des formulaires : input contrôlé
• Gestion des formulaires : vérifications des champs
• Gestion des formulaires : formatage des valeurs
• Gestion des formulaires : traitement des données
• PARTIE 13 Requête HTTP et Axios
• Introduction aux requêtes HTTP
• Mise en place d'Axios
• Requêtes GET et POST
• Requêtes PUT et DELETE
• Définir des paramètres pour ses requêtes
• Les intercepteurs
• PARTIE 14 React Routeur
• Introduction au Routeur
• Les composants de base du Routeur
• Approfondissement du composant Route
• Utilisation de Switch
• Utilisation de NavLink
• Utilisation de Redirect
• Paramètres d'URL et de Query
• Navigation programmatique et withRouter
• Les gardes
• Utilisation de Prompt
• Le routing lazy
• Scrolltop à chaque navigation
• Les routes imbriquées
• PARTIE 15 Maitriser React
• Children
• Fragments
• Proptypes
• API Context
• Les composants Higher-Order (HOC)
• Utilisation de Render Props
• Les composants Purs et Memo
• Portail
• Lazy, import() et Suspense
• Périmètres d'erreurs : Boundaries errors
• PARTIE 16 Découverte des Hooks React
• Présentation des Hooks
• useState pour gérer l'état de ses composants
• useEffect pour gérer le cycle de vie de ses composants
• useRef
• useContext
• useCallback
• useMemo
• useReducer
• useDebugValue
• Créer ses propres hooks
• PARTIE 17 Déployer son application React en ligne
• Les différentes méthodes de build/compilations
• Les différents types de serveurs
• Déploiement de votre application React sur un serveur standard
• Déployer son application React sur un serveur node.js
• Déploiement de son application React sur un Serverless Netlify
• PARTIE 18 Aller plus loin avec React
• Penser en React
• Continuer à progresser en React
• Les bonnes ressources pour un développeur React

Modalités pratiques

Travaux pratiques
Création d'une application fil rouge avec les derniers standards : standalone components, l'API Signal pour gérer la réactivité, la syntaxe de control flow.

Méthodes pédagogiques
Chaque nouveau concept théorique sera appliqué immédiatement de façon pratique.

Modalités d'évalutation

null