REACT – Créer des interfaces web modernes

Référence : REACT
Durée : 3 jours (21 heures)

Présentation

React et Angular sont les deux frameworks de développement web les plus populaires du moment. Si Angular nous vient de Google, React est une création de Facebook. Conçu pour être plus simple moins intrusif que son rival, React gagne du terrain.

Durant cette session la syntaxe JSX sera étudiée en détail, un renforcement des acquis autour de JavaScript et de ses évolutions récentes sera également fait. Ensuite, nous plongerons dans le cœur du sujet en abordant React à la fois au travers de ses aspects pratiques mais également sur ses concepts fondateurs.

L’environnement de développement, la chaîne de compilation et l’outillage (NodeJS, Webpack, Babel…) seront bien entendu au programme de cette formation. Enfin, nous terminerons par des conseils sur l’architecture logicielle et la mise en production.

Programme

JavaScript, le langage du web
  • Rappel sur JavaScript (5.1)
  • Fonctionnement du moteur d’exécution JS
  • Les pièges du langage
  • Programmation fonctionnelle
  • Programmation objet par prototypage
  • Les nouveautés ECMAScript
L’écosystème du développeur React
  • L’outillage du développeur web front JS
  • NodeJS, npm, npx, yarn
  • Webpack
  • Le transpiler Babel
  • Quid de TypeScript ?
Découverte du framework React
  • Présentation de React
  • Une librairie plus qu’un framework
  • Concept de Virtual DOM
  • Algorithme de réconciliation
  • JSX: de l’HTML dans du JavaScript
Créer une application pas à pas
  • Scaffolding avec create-react-app
  • Structure d’une application React
  • Système de rendu
  • Les éléments
  • Différents types de composants
  • Propriétés des composants (props)
  • Gestion du cycle de vie des composants
  • Composants avec état
Interfaces graphiques complexes
  • Rendu conditionnel
  • Eléments multiples
  • Prise en compte des évènements utilisateur
  • Les formulaires
  • Les composants contrôlés
  • Material UI
  • Le pattern « unidirectional data flow »
  • Traitement des erreurs (error boundary)
Fonctions avancées
  • Higher Order Composants
  • Exposer des éléments internes
  • Partage de code entre composants (render props)
  • Rendu en dehors du composant parent (portal)
  • React router
  • Navigation
  • Les requêtes HTTP
  • Les Promises
Conception logicielle & passage en production
  • Architecture applicative Flux
  • Quelques bonnes pratiques: CQRS et Event Sourcing
  • Gestion de l’état avec Redux
  • React/Redux
  • Packaging de production
  • Diviser son application
  • Les tests unitaires avec Jest

Prochaines sessions inter-entreprises

Toulouse :

Du 20 au 22 mars 2019
Du 26 au 28 juin 2019
Du 25 au 27 septembre 2019
Du 13 au 15 novembre 2019

Paris :

Du 13 au 15 février 2019
Du 22 au 24 mai 2019
Du 03 au 05 juillet 2019
Du 23 au 25 octobre 2019

Méthode pédagogique

50% de travaux pratiques

Audience

Développeurs web

Versions des technologies

React 16, ECMAScript 2017

Pré-requis

Connaissances du DOM et de JavaScript

Tarif

1595 €

Votre nom (obligatoire)

Votre email (obligatoire)

Votre société (obligatoire)

Votre demande