Created by useiconic.comfrom the Noun Project

Introduction à React.js

Le but premier de cette formation est de présenter React.js et de permettre aux participants d'être capables d'utiliser React.js par la suite de manière autonome. Au travers de l'apprentissage de React cette formation va permettre aux participants de comprendre la notion de composant et de réutilisabilité de ces derniers. Ce concept se retrouve dans des frameworks fullstack comme Angular2 et Ember.js. De plus cette formation sera réalisée en utilisant la spécification ES6 de JavaScript, ce qui permettra une présentation des nouvelles fonctionnalités de cette nouvelle spécification. Dans une vision plus large l'intérêt d'utiliser React réside dans le fait que ce dernier n'étant pas un framework fullstack (à l'inverse de Angular ou Ember) mais une librairie. Ce qui veut dire qu'il peut être utilisé en dehors d'un contexte Single page application et peut facilement être utilisé avec des frameworks backend (Rails, Laravel, Django..), ainsi que certains CMS (Drupal).

Cette formation ne couvrira pas : Webpack, l'architecture Flux.

Plan de cours

  • Présentation de React
    • React, c'est quoi ?
    • Pourquoi avoir crée React.
    • React est une bibliothèque pas un framework. En gros c'est le V de MVC. Action unidirectionnel. Explication du virtual DOM
    • Point rapide ES6
    • Class
    • Modules
    • etc
  • Créer son premier composant
    • Présentation de JSX
    • Définition d'un component
    • Créer un composant
    • Rendre le composant dans la page
    • Ajouter exercice
  • Découverte des props
    • Créer un composant et lui passer un props
    • Définir des propsTypes
    • Définir des props par défaut
    • Passer une fonction en props
    • Passer des props children
  • Découverte des states
    • Changer l'état d'un compoment
    • Passer un state en props
    • Définir les états par défaut
  • Faites communiquer avec vos composants
    • Communication parent -> enfant
    • Communication enfant -> parent
    • Refs
    • le contexte
  • Ajouter du style aux composants
    • Exemple avec workflow 'normal'
    • Exemple avec style-inline
    • Exemple avec css-modules
  • Mise en pratique
    • Exemple avec workflow 'normal'
    • Exemple avec style-inline
    • Exemple avec css-modules

Clientèle visée

Développeurs Web.

Préalables

De solides connaissances en javaScript sont nécéssaire (concept POO).