Être rappelé(e)

Formation React

Formez-vous efficacement à la librairie React.

  • Utilisez votre CPF
  • Eligible OPCO
  • Eligible Pôle Emploi
  • Objectifs Créer des interfaces utilisateur performantes, et créer rapidement vos premiers projets d'application web avec React.
  • Public Développeur front-end et/ou Intégrateur
  • Niveaux requis Connaissances web HTML/CSS et débutants en programmation Javascript
  • Durée 5 jours

Programme

Exo Sondage

Exo Todolist

Exo Météo

Exo Movies

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

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

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

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

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

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

Développer avec React

  • Affichage conditionnelle
  • Rendre une liste
  • Utiliser et comprendre les keys de React
  • Afficher une image avec React
  • Default props

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

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

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

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

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

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

Aller plus loin avec React

  • Penser en React
  • Continuer à progresser en React
  • Les bonnes ressources pour un développeur React
Et obtenez votre certification !

Ils me font confiance