React.js + Flux

Bonnes maîtrises de l'environnement JavaScript

Découvrir React.js et Flux

Introduction

Développement d'applications web
Panorama des librairies disponibles
React.js: présentation, composantes
Rappels HTML5, JavaScript, JSX, le DOM

Atelier: Mise en place d'un projet REACT JS

ECMASCRIPT 2015 (ES6)

Spécification ECMAScript et implémentations (JavaScript, JScript)
Transpilation ES6 => ES5 avec Babel
Programmation Orientée Objet:
Evolution de la programmation orientée prototype
Classes: membres d'instances et membres de classe
Agrégation d'objets (mixins)
Héritage
Arrow functions
Design patterns
Définition de modules
Système natif de gestion des modules, chargement
Gestion des dépendances

Approche MVC et Virtual DOM

Architecture de REACT
Vues (V): fonctionnement, implémentation
Implémentation des vues: affichages, saisies, actions, binding et filtres

Composants REACT JS

Définir un composant
Créer un premier composant

Utiliser les propriétés

Etats des composants

Style CSS pour un composant

Gestion des évènements

Relation entre composants: créer et appliquer les références, ajouter des enfants aux éléments, interaction avec les propriétés.

Cycle de vie d’un composant

Comprendre les cycles

Monter un composant

Ajouter des méthodes à un composant et des propriétés par défaut

Fixer des types de propriété

Navigation REACT JS

Mise en place du Routing (React-router)

Rendu d’une route

Liens via les Router

Organiser les routes

Passage de paramètres liens, redirections

REACTJS et FLUX

Prise en main FLUX

Les stores unique,
Usage reducers et les actions

Implémenter le pattern
Flux dans un projet

Atelier: créer une SPA: single page application

Conclusion

Bonnes pratiques REACT JS (state, prop types, render, composition, hoc)
Astuces

Méthodologie basée sur l'Active Learning : 75% de pratique minimum. Chaque point théorique est systématiquement suivi d'exemples et exercices.

Contrôle continu

Attestation de fin de stage mentionnant le résultat des acquis