d

WE ARE WISE ACADEMEX

Let’s Work Together

contact@wiseacademex.com

4 rue de berne, Résidence Tilila, 7éme étage, N°14

REACTJS

  • 2 Jours

A PROPOS

Prenant à contrepied les modèles traditionnels, le framework maintenu par Facebook favorise la simplicité et la performance des composants de RIA. Vous apprendrez dans ce cours à développer des applications avec ReactJS, JSX et Flux et découvrirez le principe et les bénéfices du développement isomorphique.

s'inscrire

OBJECTIF

 

  • Développer avec ReactJS
  • Concevoir une SPA avec ReactJS et Flux
  • Comprendre le subset JavaScript JSX
  • Optimiser les performances des RIA
Travaux pratiques

Vous réaliserez une application complète basée sur le framework ReactJS.

illustration1

pré-requis

illustration2
  • Afin de pouvoir suivre la formation React JS, il est recommandé de bien connaitre Java Script, HTML et CSS

Qui Devrait Suivre cette formation

La formation React JS est destinée aux Chefs de projet web, Architectes techniques, Développeurs front-end
illustration3

PROGRAMME

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.

DEVELOPPER 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.

INTERACTIVITE 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 A REACT NATIVE

  • Positionnement, différences avec Cordova.
  • De React aux composant iOS natifs, un projet à suivre.
Travaux pratiques
    Application utilisant React Native.
s'inscrire
Open chat