Objectifs de la formation
- Développer avec ReactJS
- Concevoir une SPA avec ReactJS et Flux
- Comprendre le subset JavaScript JSX
- Optimiser les performances des RIA
Programme de la formation
Rappels des composants des RIA
- Les fondamentaux. HTML, CSS, JavaScript. Le DOM.
- Design patterns applicatifs classiques. Limitations des applications JavaScript.
- Ecosystème des frameworks JavaScript.
- Principes de Data-Binding : dirty-checking, observable, virtual-dom.
- ReactJS, positionnement et philosophie.
- JSX, présentation. Mise en œuvre "Transpilers".
- Environnement de développement. IDE et plug-ins.
Travaux pratiques
Mise en place de l'environnement de développement. Initiation à JSX. Définition de la structure de l'application.
Développer avec ReactJS
- Approche : MVC et Virtual Dom, un choix de performance.
- Utiliser JavaScript ou JSX.
- Comprendre JSX en détail. Pièges à éviter.
- Méthodes principales de l'API.
- Création de composant de vues. Cycle de vie.
- Initialisation de propriétés.
- "Render Function" : gestion des états de composant.
Travaux pratiques
Définition et réalisation de composants selon les spécifications déterminées.
Interactivité des composants
- Gestion des événements. "autobinding" et délégation.
- Design Pattern : stratégie pour les composants à état.
- Composer par ensembles.
- "Component Data Flow" : propriétaire, enfants et création dynamique.
- Composants réutilisables : contrôle et transfert de propriétés.
- Contrôle des composants de formulaire.
- Manipulation du DOM.
Travaux pratiques
Création d'un ensemble structuré de composant UI.
Application monopage avec ReactJS et Flux ou Redux
- Flux/Redux : présentation. Propagation de données.
- Comparaison des architectures.
- Création de vues et contrôleurs dans Flux.
- Rôle du "Dispacther" dans Flux pour les actions.
- Les "Stores", gestionnaire d'états logique dans Flux.
- Définition du Functionnal Programming.
- Approche avec Redux. Le "Reducer".
- Extension pour ReactJS : "hot-loader".
Travaux pratiques
Intégration d'une SPA.
Application isomorphique
- Principe et bénéfices du développement isomorphique.
- Ecosystème du JavaScript côté serveur.
- Initiation à NodeJS.
- Configuration de NodeJs pour ReactJS.
- Organisation de routes.
Travaux pratiques
Prérendu serveur d'une application.
Introduction à React Native
- Positionnement, différences avec Cordova.
- De React aux composant iOS natifs, un projet à suivre.
Démonstration
Application utilisant React Native.