AELION : 06. React JS - Développement d'applications web
Organisme
31200 TOULOUSE
Contact
Durée
21 heuresModalités
- Classe virtuelle
- Présentiel
Questionnaire d’évaluation des pré-requis avant le stage, de satisfaction en fin de stage, évaluation des acquis en fin de formation. Feuille de présence, attestation de fin de formation.
Prix
Public
Développeurs, architectes, chefs de projets…
Pré-requis
Avoir des connaissances pratique du développement Web, maîtrise et pratique de JavaScript (ES5 minimum).
Objectifs pédagogiques
- Connaître les spécificités de ReactJS
- Savoir développer des applications web performantes avec ReactJS
- Concevoir une SPA avec ReactJS et Flux
- Comprendre le subset JavaScript JSX
- Optimiser les performances des RIA
- Être en mesure de comprendre les impacts du choix d'une architecture incluant ce type d'application
Programme détaillé
IDENTIFIER LES SPECIFICITES DE REACTJS
- A l’issue de cette séquence, vous êtes capable d’utiliser les syntaxes de code moderne de Javascript (ES6 et +). Vous identifiez la notion de composant (Web components). Vous comprenez l’intérêt des Framework (notamment de REACT), et les mécanismes qui se cachent derrière ces derniers.
- Les Single Page Applications
- Les limites de Javascript et de jQuery
- Lenteurs du DOM
- Positionnement de React JS
- Création une SPA « from scratch en JS »
DEVELOPPER DES APPLICATIONS WEB PERFORMANTES AVEC REACTJS (1/2)
- A l’issue de cette séquence, vous êtes capable d’installer et de configurer un projet React. Vous savez définir et utiliser les concepts de bases (composants, props, state, etc.).
- Le composant <HelloWorld>
- Principe et conséquences du Virtual Dom
- La fonction render()
- 'props' et 'state'
- Composition de multiples composants
- Cycle de vie d'un Composant
DEVELOPPER DES APPLICATIONS WEB PERFORMANTES AVEC REACTJS (2/2)
- A l’issue de cette séquence, vous êtes capable d’utiliser les hooks React. Vous êtes capable d’aller plus loin et d'utiliser les formulaires. Vous savez consommer une API avec React en utilisant une librairie comme Axios.
- Utilisation des Hooks
- Gestion d'Ajax
- Gestion des formulaires
- Ecrire des composants avec des Hooks
- Consommer une API REST avec Axios
- Créer un formulaire et traiter ses données
CONCEVOIR UNE SPA AVEC REACTJS ET FLUX
- A l’issue de cette séquence, vous êtes capable de définir les principes de Flux et Redux. Vous savez utiliser une implémentation simple de Redux.
- Limites de l'approche MVC
- Présentation de Flux et Redux
- Le Store et les Actions
- Création de Réducteurs pour les Actions
- Création un store (à la mode Redux)
- - Initialiser, consommer et modifier le store depuis les composants
- - Restaurer un état depuis le store
METTRE EN PRATIQUE LES CONCEPTS ET LES SYNTAXES JSX
- A l’issue de cette séquence, vous êtes capable d’utiliser le JSX et les syntaxes associées.
- Le langage JSX
- Les bonnes pratiques ou pièges à éviter (subsets JSX, etc.)
- Découpage des composants avec JSX
- Utilisation des Javascript Expressions et Props JSX
OPTIMISER LES PERFORMANCES DES RIA
- A l’issue de cette séquence, vous êtes capable d’identifier l’intérêt de compiler les applications web. Vous savez qu’il existe des outils pour monitorer la performance des applications web comme React qui sont exécutées côté client.
- Compiler et déployer une application ReactJS
- Mesurer la performance côté client
- Aperçu des outils de Build
- Builder l’application avec Brunch ou Webpack
- Mesurer la performance avec DevTools Profiler
IDENTIFIER LES IMPACTS DES ARCHITECTURES RIA
- A l’issue de cette séquence, vous êtes capable d’identifier le principe, les intérêts ou inconvénients des architectures fullstack JS.
- Principe et bénéfices du développement isomorphique (fullstack JS)