ReactPrésentation

3 jours pour découvrir et comprendre la librairie React.
Stage pratique, magistral et didactique, pour devenir autonome.

Objectifs

    À l'issue de cette formation, les participants seront en mesure de :
  • Appréhender la philosophie et le fonctionnement de la bibliothèque React
  • Développer une application Web avec React
  • Maîtriser les impacts du choix d'une architecture incluant React et Flux

Méthode pédagogique

Alternance de 30% de cours magistraux et de 70% de travaux pratiques (live coding) sur machine individuelle. Le stage se déroule autour de la réalisation d'une application simple et fonctionnelle. Un support de cours est remis à chaque participant au format électronique.

Au delà de React

Si React reste bien entendu le principal sujet de la formation, une multitude de notions annexes autour de JavaScript et du web en général sont abordées en complément: les Promesses, le duo async/await, les nouveautés en préparation par le TC39, GraphQL, React Native, SASS, le vectoriel, elm…

Public

  • Développeurs front-end
  • Développeurs back-end
  • Chefs de projet Web
  • Architectes techniques

Pré-requis : Bonne connaissance de JavaScript, Connaissance HTML / CSS, pratique du développement web.

Formules

  • Inter-entreprises ou Intra-entreprise
  • 8 stagiaires maximum / session
  • Accueil possible dans vos locaux
  • Devis sur mesure à la demande
Contactez-nous

Besoin d'aller plus loin ?

Formation React sur mesure

  • Contenu niveau avancé, adapté aux besoins spécifiques présentés
  • Durée adaptée, 2 ou 3 jours répartis en cours magistraux et TP
  • Pré-requis : Bon niveau JavaScript et 1ères expériences réussies avec React
  • Accueil possible dans vos locaux
  • Devis sur mesure à la demande

React Programme de la 1ère journée :

    Introduction à React :
  • Retour sur l’environnement front-end actuel et son futur proche (de jQuery au WebComponents)
  • Concepts de base chargement de ressources, modularité, asynchronisme, data-binding, immutabilité…
    Les choix de React :
  • Le “V” de MVC ?
  • Composants à état, encapsulation
  • Fonctions de rendu simples
    Virtual DOM & schedulers :
  • La clé des performances
  • Priorités de rendu apportées par React 16 (Fiber)
    Travaux pratiques
  • Installation de son environnement de travail
  • Création d’un premier arbre de composants, propagation des props, branchement des event-handlers, population de composants enfants, gestion de l’état interne…

React Programme de la 2ème journée :

    Travaux pratiques : bâtir sur create-react-app
  • Installation d’un environnement de production plus moderne: Node, ESLint, Webpack, Hot reloading, React DevTools…
  • Appropriation de JSX, validation des PropTypes, modules ES2015, structuration du projet, intégration de composants tiers via NPM
  • Manipulation plus ambitieuse du DOM, du CSS
  • Tirer partie du cycle de vie des composants
    Travaux pratiques : garanties et robustesses
  • Types: annotations et couverture avec Flow
  • Tests unitaires, snapshots via Jest

React Programme de la 3ème journée :

    Travaux pratiques : meilleure gestion de l'état
  • Revisiter la communication inter-composants
  • Externalisation de l’état avec un store Redux (les différences avec MobX seront évoquées)
  • Dispatch d’actions, composition des reducers associés
  • Manipulation du context
  • Redux DevTools, time-travel debugging
  • Intégration du Provider et des connexions React-redux
  • Ajouts de middlewares Redux (localStorage)
  • Préparation des action-creators synchrones, puis asynchrones (comparaison entre thunks, promises et sagas)
  • Appels d’API distante (REST)
    Travaux pratiques : vers une app plus complexe
  • Rendu des composants côté serveur (isomorphisme)
  • Routage (v4)
  • i18n
Contactez-nous