Formation ReactJS

OBJECTIFS

Cette formation doit amener les participants à pouvoir créer eux-mêmes des composants sous ReactJS, modulables et interfacés avec une API. Pour cela, nous allons d’abord découvrir ensemble l’environnement de ReactJS et ce qui gravite autour de cette librairie.

Ce type de développement demande également un environnement bien spécifique que nous allons mettre en place. Dès lors, nous débuterons un TP qui va nous suivre tout au long de la formation tout en allant plus loin dans la compréhension de cette librairie.

D’abord en créant un premier composant et en comprenant ses différentes propriétés. Puis, nous allons découvrir l’architecture Flux par l’intermédiaire du module Redux et quel est l’intérêt d’un objet immutable.

Nous n’épargnerons pas notre outil qui va nous servir pour debugger nos applications : indispensable pour bien développer. Nous irons plus loin en mettant en place un router sur notre module. Enfin, nous finirons la formation en récupérant des données via une API grâce avec notre client HTTP axios pour terminer notre application.

Prérequis

  • Solides connaissances en JavaScript (si possible ES6)
  • Avoir node / npm d’installé sur son environnement (les dernières versions sont recommandées)
  • Avoir au moins connaissance des outils de build (Brunch, Grunt, Gulp, Webpack, … )

PLAN DE FORMATION

Introduction à ReactJS et sur son environnement de développement

  • Tour d’horizon sur React et de son intérêt
  • Explication du cycle de vie de React et de l’approche composant.
  • ES5 ou ES6 ? Que choisir et pourquoi ?
  • JSX ? Qu’est-ce que c’est ?

Mise en place de compréhension de notre environnement de développement

  • Présentation de nos futurs outils de travail : BrunchJS (peut être remplacé par Webpack si les participants le souhaite)
  • Présentation de Babel
  • TP : Compréhension et mise en place de son environnement avec BrunchJS et Babel pour préparer le développement avec ES6

Démarrer un développement ReactJS

  • Garder en tête une approche SOLID
  • Ecriture en live d’un premier composant afin d’aborder ensemble le framework
  • TP : Ecriture des premiers composant en ES6

Les différentes attributs de ReactJS

  • Props VS State
  • Les refs

Architecture Flux et mise en application avec Redux

  • Présentation de Flux et de l’immutabilité des objets
  • Découverte et mise en place de Redux
  • Architecturer notre application

Debugger son application

  • Debugger avec le composant DevTools
  • Mais aussi avec une extension chrome
  • TP : Création des composants nécessaires à notre application avec Redux

Un router

  • Présentation du router qui n’oblige pas forcément à développer une SPA.
  • Mise en place du React Router
  • TP : Travailler sur notre application de départ avec de nouvelles routes

Travailler avec des données en provenance d’une API

  • Mise en place d’un client HTTP : Axios
  • TP : Evolution de notre application en récupérant des données sur une API

Supplément en fonction de la vitesse et de l’expérience du groupe

  • Tour d’horizon sur le server-side rendering
  • Tests fonctionnels

Les TPs se font régulièrement sur les thèmes suivants : - films, football, l’univers Marvel. Ils peuvent être adaptés si l’un d’entre eux ne vous inspire pas.

Demander un devis personnalisé...

Audit avant formation icone

Avant toute formation, nous vous contactons afin d'effectuer un audit et prendre connaissance de vos spécificités.
Nous pouvons adapter ce plan de cours standard en fonction de vos besoins ou de votre niveau de connaissances.

Les exemples peuvent aussi être adaptés en fonction de votre demande.