Contactez-nous

React / Redux

Formation React / Redux

React est une bibliothèque JavaScript créée par Facebook en 2011 et rendue Open-Source en 2013, son succès a été immédiat. React permet la création de composants d’UI réactifs, ce qui signifie que les composants se rafraîchiront automatiquement dès que les données changent. React est une bibliothèque pour le développement front-end (dans le navigateur), mais peut également être utilisé côté Node.js avec des projets comme Next.js ou Gatsby, ou bien dans des applications mobiles natives iOS et Android avec React Native. Pour architecturer un projet et est courant d’utiliser 2 autres bibliothèques : react-router et redux qui seront également couvertes par cette formation.

Objectifs pédagogiques / Compétences visées

  • Créer des composants React en lien avec le State et les Props
  • Maitriser le JSX, les listes et les événements
  • Développer une application en lien avec Redux
  • Créer une Single Page Application avec React Router

Pré-requis

  • Connaître les bases d'HTML et CSS
  • Avoir déjà développé en JavaScript

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

  • Les IDEs JavaScript
    • Visual Studio Code
    • WebStorm
    • EditorConfig
  • Une réintroduction à JavaScript
    • Closures
    • Fonctions Constructeurs et Prototype
    • ES5.1, ES6, ES7, ES8, ES.Next
  • Outillage d’un projet React
    • webpack
    • Live Server et Hot Reloading
    • create-react-app
    • React Developer Tools
  • Introduction à React
    • Création d'un projet
    • Les commandes de react-scripts
    • Premier Composant React
    • Composant stateless vs statefull

Jour 2

  • JSX
    • Ecrire un composant sans JSX
    • Expressions et propriétés
    • Rendu conditionnel
    • Liste et clés
  • Composants React
    • State et Cycle de vie
    • Ecouter des événements
    • Les formulaires
    • Partager le state entre plusieurs composants
    • Mettre en forme avec les CSS Modules ou du CSS in JS
  • Introduction à Redux
    • Pourquoi et quand utiliser Redux ?
    • Structurer son app React autour d'un seul state
    • Redux Devtools Extension
    • Actions, Dispatch et Reducers
    • Intégrer Redux dans React avec react-redux

Jour 3

  • Structurer une application Redux
    • Factoriser les types avec des constantes
    • Factoriser les actions avec des actions creators
    • Les sélecteurs et la bibliothèque reselect
  • React Router
    • Créer une Single Page Application avec React Router
    • Créer des liens
    • Déclencher une navigation
    • Récupérer le contenu de l'URL
    • Imbriquer des Routes

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation