Python, Ruby, Php, Javascript, Java, SQL, Framework, HTML5, ...

Intermédiaire 3 jours (21h) - St Cloud 1500 ht

Réf : REA1

Formation ReactJS

Créer des interfaces utilisateurs graphiques riches avec la nouvelle librairie JS soutenue par Facebook.

React est une librairie JavaScript open source maintenue par Facebook / Instagram créée en 2011. Elle permet la création d'interface utilisateur graphique (GUI) riche. L'accent est mis sur la compréhension du développeur. React privilégie un sens unique et prévisible de la propagation des données (one way data binding) et facilite la coopération entre composants autonomes (components). Ainsi, en l'absence d'un état métier (state) éparpillé et d'un couplage fort, les effets de bord sont cloisonnés. Il est alors plus simple de raisonner sur une application complexe dans son ensemble et de travailler en équipe. Pour appuyer sa philosophie, React bouscule certaines pratiques établies. Le rendu de l'application est recalculé intégralement à chaque changement d'état, mais grâce à un DOM virtuel (virtual DOM) faisant office de tampon haute performance par dessus le navigateur, seuls les éléments modifiés sont re-rendus. Un nouveau langage facultatif, JSX, facilite aussi la cohabitation entre le DOM et JavaScript au sein d'un même composant.

Programme

1. Introduction à React

  • Retour sur l’environnement front end actuel et son futur proche
  • Concepts de base (data-binding, immutabilité…)

2. Les choix de React

  • Le “V” de MVC?
  • Composants à état
  • Fonction de rendu simple
  • Performance

3. Virtual Dom

  • La clé des performances de React
  • Pourquoi et comment

4. Créer un composant Rect (TP)

  • Installation de son environnement de travail
  • Création d’un composant simple qu’on va dynamiser ensemble

5. Syntaxe : JSX, ES6... (TP)

  • Un langage pour simplifier la description du Virtual DOM
  • Aperçu des fonctionnalités d’ES6 utilisable dès aujourd’hui et qui vont nous simplifier tout le reste !

6. Propriétés d'un composant (TP)

  • State vs. Properties
  • Cas d’utilisation

7. Communication inter-composants (TP)

  • Présentation des méthodes de communication inter-composants
  • Flux et Redux

8. Vers une application complète (TP)

  • Routage
  • Architecture complète
  • Internationalisation

9. Serveur (TP)

  • Gestion des données serveur (aperçu de Relay)
  • Isomorphisme ("Application universelle")
Tlcharger l'article au format PDF