ReactJS, développement d'applications web
3 j (21 heures) Ref : REACT
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)
Moyens pédagogiques
Modalité : Formation présentielle ou Formation distancielle (classe virtuelle) - Inter / Intra - Groupes de 4 à 12
stagiaires
Méthodes : Présentation des concepts, discussion technique, démonstrations, exercices et TP
Matériel :
Présentiel : Un poste informatique par stagiaire connecté à internet, à une imprimante en réseau et au réseau
informatique,
Les salles sont équipées d’un tableau interactif ou d’un vidéoprojecteur et d’un paperboard
Distanciel : Aelion met à disposition de chaque stagiaire
- Un PC équipé des outils et logiciels nécessaires à la formation auquel vous accédez via un outil de prise en
main à distance
- Un accès à un outil de classe virtuelle
Support de formation : Un support de formation sera remis à chaque stagiaire en fin de formation : plateforme
collaborative intégrant le code source des exercices réalisés en formation, webographie, mémos
Modalités de suivi et d'évaluation
Questionnaire d’évaluation des pré-requis, suivi des connaissances tout au long de la formation, Evaluation
des acquis en fin de formation
Questionnaire d’évaluation de la satisfaction en fin de stage, feuille de présence émargée par demi-journée
par les stagiaires et le formateur, Attestation de fin de formation
Le framework de développement « frontend » promu par Facebook fait partie de l’outillage incontournable
dans la production d’interfaces et d’applications web aujourd’hui. A l’instar d’Angular, React vous
permettra de créer rapidement des éléments d’une interface web, et de faire interagir ces éléments entre
eux par l’intermédiaire d’un gestionnaire d’états Redux.
Vous profiterez des modules compagnons pour communiquer avec un backend et optimiserez vos
applications grâce aux principes d’immutabilité des composants et à la programmation fonctionnelle
(hooks et custom hooks) promus par React. Vous pourrez en outre approcher la programmation native
d’applications grâce à React Native et profiter des sous-systèmes mobiles. A l’issue de la formation, vous
serez capable de développer des interfaces utilisateurs avec la bibliothèque ReactJS, pour la création
d’applications web robustes et performantes.
Action collective OPCO ATLAS -
Objectifs
ReactJS, développement d'applications web
Identifier les spécificités de ReactJS
Développer des applications web performantes avec ReactJS
Concevoir une SPA avec ReactJS et Flux
Metttre en pratique les concepts et les syntaxes JavaScript JSX
Optimiser les performances des RIA
Identifier les impacts des architectures RIA
Programme détaillé
IDENTIFIER LES SPECIFICITES DE REACTJS
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)
Le composant
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)
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
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
[Link] | inscription@[Link] | 05 61 49 42 60 Page 2
ReactJS, développement d'applications web
METTRE EN PRATIQUE LES CONCEPTS ET LES SYNTAXES JSX
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
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
Principe et bénéfices du développement isomorphique (fullstack JS)
[Link] | inscription@[Link] | 05 61 49 42 60 Page 3
