ReactJS

React (aussi appelé React.js ou ReactJS) est une bibliothèque JavaScript libre développée par Facebook. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion de page) HTML à chaque changement d'état.

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

• Développer avec ReactJS.
• Concevoir une SPA avec ReactJS et Flux.

• Comprendre le subset JavaScript JSX.
• Optimiser les performances des RIA (Rich Internet Applications).

Public concerné

Ce cours s'adresse principalement aux développeurs de sites web.

Prérequis

Avoir des connaissances de base en développement web et en JavaScript.

Programme de la formation

Rappels des composants web

• Les fondamentaux : HTML5, CSS3, JavaScript. 
• Le DOM et DOM virtuel.
• Design patterns applicatifs classiques. 
• Limitations des applications JavaScript.
• Ecosystème des Framework JavaScript.
• Principe de Data-Binding: dirty-checking, observable, virtual-dom.
• ReactJS, positionnement et philosophie.
• JSX, présentation. Mise en œuvre "Transpilers".
• Environnement de développement. IDE, extensions et plug-ins.

Développer avec ReactJS

• Approche : MVC et Virtual Dom, un choix de performance.
• Utiliser JavaScript ou JSX.
• Éléments React.
• Comprendre JSX en détail. Pièges à éviter.
• JSX représente des objets.
• Le rendu des éléments.
• Cycle de vie.
• Initialisation de propriétés. 
• Composants et props.
• "Render Function" : gestion des états de composant.

Atomic design

• L'atome.
• La molécule.
• L'organisme.
• Le Template.
• La page.
• Le Storybook.

Les composants : architectures et interactivités

• Design Pattern : stratégie pour les composants à état.
• Composer par ensembles.
• Composition de composants.
• Savoir Extraire des composants.
• "Component Data Flow" : propriétaire, enfants et création dynamique.
• Composants réutilisables : contrôle et transfert de propriétés.
• Gestion des événements. "autobinding" et délégation.
• Passer des arguments à un gestionnaire d’événements.

Communication entre composants

• Communication de parent à enfant.
• Communication enfant à parent. 
• Communication entre enfants. 
• Composants non liés (tout composant à un composant) communication.
• 8 Stratégies.
• Composant non liés.
• Le modèle d'observateur.
• EventEmitter et les différentes bibliothèques.

Les Formes

• Composants contrôlés.
• Contrôle des composants de formulaire.
• Manipulation du DOM.

Application SPA 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".
• Les Hooks de Redux.
• Présentation des Hooks.
• Utiliser la state dans une fonction.
• Les fonctions useState et useEffect.

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.
• Routage de base.
• Paramètres de routage et d’URL imbriqués.

Test et performance 

• Personnalisation du Composant Lien.
• Les tests en JavaScript.
• Tester les composants React.
• Optimiser les composants React.

Moyens pédagogiques

Travaux pratiques.