Les fondamentaux de

React js
 À propos de moi
Khaireddine SARRAJ

ingénieur en génie logiciel (Laravel& React Js),

Chef d’équipe chez Edidact SA et freelancer
chez Fiverr
E-mail: sarraj.khaireddine@gmail.com

Twitter: twitter.com/Acewings_sk

LinkedIn: linkedin.com/in/khaireddinesarraj-3220a1150

WWW: fiverr.com/share/NEwv0o
Qu’est ce que React js?
Qu’est ce que React js?
• Développé par Facebook

• React est une bibliothèque de couches de vue, pas un framework comme

Backbone, Angular, etc.

• Vous ne pouvez pas utiliser React pour créer une application Web entièrement
fonctionnelle.
Pourquoi React js a-t-il
été développé ?
Pourquoi React js a-t-il été développé ?
• Complexité de la liaison de données bidirectionnelle

• Mauvaise expérience utilisateur (UX) due à l'utilisation de "mises à jour en

cascade" de l'arborescence DOM

• Beaucoup de données sur une page changeant au fil du temps

• Complexité de l'architecture de l'interface utilisateur (UI) de Facebook

• Passer de la mentalité MVC

Qui utilise React js?
 Les avantages et les
inconvénients de React js?
Les avantages et les inconvénients de
React js?
• Facile à comprendre ce qu'un composant
rendre
• Code déclaratif → code prévisible
• Vous n'avez pas vraiment besoin d'étudier JS dans le
fichier de vue pour comprendre ce que fait le fichier
• Ce n'est pas difficile à apprendre
• Facile à mélanger HTML et JS
• Vous le faites déjà avec des bibliothèques de modèles
(par exemple, guidons, moustache, underscore, etc.)
va • Utilise toute la puissance de JS
• Le découplage des modèles de la logique ne
repose pas sur les abstractions primitives des
modèles, mais utilise toute la puissance de
JavaScript pour afficher les vues
• Pas de flux de données bidirectionnel complexe
• Utilise un flux de données réactif unidirectionnel simple
• Plus facile à comprendre que la liaison bidirectionnelle
• Utilise moins de code
Les avantages et les inconvénients de
React js?
• React est rapide!
• Real DOM (DOM physique) est lent.

• JavaScript est rapide.

• L'utilisation d'objets DOM*1 virtuels permet des mises à jour par lots rapides vers le DOM réel, avec des gains
de productivité importants par rapport aux mises à jour en cascade fréquentes de l'arborescence DOM.

• Outils de développement React

• L'extension React Chrome facilite grandement le débogage.

• Rendu côté serveur

• React.renderToString() retourne HTML pure.

1*The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the
“real” DOM by a library such as ReactDOM
Les avantages et les inconvénients de
React js?
• Réagir n'est rien d'autre que la vue • Pas de support pour les anciens navigateurs

• Pas d'événements • React ne fonctionnera pas avec IE8

• Pas de XHR • Il y a des polyfills / cales qui aident

• Pas de données/modèles
• Construire JSX nécessite un travail supplémentaire
• Pas de promesses
• Mais la plupart du travail est déjà fait pour vous par
• Aucune idée de comment ajouter tout ce qui précède
react-tools et Babel
• Très peu d'infos dans la doc

• Désagréments architecturaux
• Aucun schéma d'annuaire de bonnes pratiques prédéfini
à suivre
Pourquoi devrions nous utiliser
React js ?
Pourquoi devrions nous utiliser React js ?
• Vues faciles à lire et à comprendre

• Le concept de composants est l'avenir du développement Web

• Si votre page utilise beaucoup de données de mise à jour rapide ou de données

en temps réel, React est la solution

• Le développement de votre application deviendra beaucoup plus rapide

• Liberté totale sur tout ce que vous voulez faire et implémenter - Profitez !!
 Fondamentaux
Les termes les plus importants en React?
Composants
Les composants de React
• Les composants sont des blocs de • Les composants React implémentent une méthode
construction réutilisables et render() qui prend les données d'entrée et renvoie ce
autonomes d'une application Web. qu'il faut afficher. Cet exemple utilise une syntaxe de
• Les composants React ne sont type XML appelée JSX. Les données d'entrée
fondamentalement que des transmises au composant sont accessibles par
fonctions idempotentes (la même render() via this.props
entrée produit la même sortie).

• Ils décrivent votre interface

utilisateur à tout moment, tout
comme une application rendue par
un serveur.
Types des composants de React
• Composants de fonction, de fonction de flèche et de
classe

• La façon la plus simple de définir un composant est d'écrire une fonction

JavaScript →
• La plupart des cas d'utilisation : affichage uniquement, logique sans état et simple

• Vous pouvez également utiliser une classe ES6 pour définir un composant→
• La plupart des cas d'utilisation : afficher et coder la logique, la logique avec
état et complexe

• Finally the Arrow function syntax we all love

• La plupart des cas d'utilisation : vue et logique, sans état/sans état et logique
simple à moyennement complexe

• Contrairement aux fonctions normales, les fonctions fléchées n'ont pas leur
propre this. La valeur de this à l'intérieur d'une fonction flèche reste la même
tout au long du cycle de vie de la fonction et est toujours liée à la valeur de
this dans la fonction parent sans flèche la plus proche.
Cycle de vie d’un
composant
Cycle de vie d’un composant
+
Propriétés et état
Propriétés
• Transmis au composant à partir du composant
parent et représente les données du composant
accessible via this.props dans un composant de
classe ou transmis en tant qu'argument

• La valeur des props peut être : String, Array,

Object, JSX, Boolean, Number ou même une
fonction

• Les accessoires ne peuvent être transmis aux

composants que d'une seule manière (parent à
enfant)

• Les données des accessoires sont immuables

(lecture seule)
État
• Représente l'état interne du composant • Lorsqu'un changement d'état est effectué, l'état ne doit pas être

• Accessible via this.state modifié directement. Au lieu de cela, les mises à jour d'état doivent
être effectuées avec une méthode spéciale appelée setState().
• Lorsque les données d'état d'un composant changent, le
balisage rendu sera mis à jour en appelant à nouveau la
méthode render()

• L'état est un objet spécial qui contient des données

dynamiques, ce qui signifie que l'état peut changer au fil du
temps et à tout moment en fonction des actions de l'utilisateur
ou de certains événements.

• L'état est privé et n'appartient qu'à son composant lorsqu'il est

défini, n'est pas accessible de l'extérieur, mais peut être
transmis aux composants enfants via des accessoires.

• State est initialisé dans la méthode constructeur de son

composant.
Rendu conditionnel
Rendu conditionnel
• Avec React, nous pouvons créer des applications vraiment dynamiques
en utilisant le rendu conditionnel. Le rendu conditionnel se produit
lorsque nous rendons différents éléments ou composants de
l'interface utilisateur en fonction de certaines conditions. Ceci est
similaire à la façon dont les conditions fonctionnent en JavaScript. Le
rendu conditionnel est un autre concept qui facilite ce processus.

• Types de rendu conditionnel :

• Opérateur ET (&&) logique
• Si... sinon déclaration
• Utilisation des opérateurs ternaires ((condition)? 'option 1' : 'option
2' )
• Empêcher le composant de s'afficher (renvoyant null)
Rendu conditionnel
Listes et clés
 Tableau ES 6 (ES 6 Array)
• Un tableau est un ensemble homogène de valeurs. Pour simplifier, un tableau est une collection de valeurs du même
type de données. C'est un type défini par l'utilisateur.

• Création dynamique d'un tableau à l'aide de la méthode Array.From() parmi :

• Les ensembles (Sets) – [ 1, " texte", {…}, {…} ]

• Les objets Set* sont des collections de valeurs. Vous pouvez parcourir les éléments d'un ensemble dans l'ordre
d'insertion. Une valeur dans l'ensemble ne peut apparaître qu'une seule fois ; il est unique dans la collection du Set.

• Un autre tableau – [‘A’, ‘B’, ‘C’,’D’]

• Ou bien abec les clés du tableau – Array(5).keys()

Filter
• L'une des tâches les plus courantes lors de l'utilisation d'un
tableau consiste à créer un nouveau tableau contenant un
sous-ensemble d'éléments du tableau d'origine. La fonction
de tableau de filtre JavaScript est utilisée pour filtrer un
tableau en fonction de critères spécifiés.

• La méthode filter() crée un tableau rempli de tous les

éléments du tableau qui réussissent un test (fourni par une
fonction).

• filter() n'exécute pas la fonction pour les éléments de

tableau vides.

• filter() ne modifie pas le tableau d'origine.

Find
• La méthode find() renvoie la valeur de l'élément du tableau
qui réussit un test (fourni par une fonction).

• La méthode exécute la fonction une fois pour chaque

élément présent dans le tableau :

• S'il trouve un élément de tableau où la fonction renvoie une

valeur vraie, find() renvoie la valeur de cet élément de
tableau (et ne vérifie pas les valeurs restantes)

• Sinon, il retourne undefined

• find() n'exécute pas la fonction pour les éléments de tableau

vides.

• find() ne modifie pas le tableau d'origine.

Map
• Parfois, vous devez prendre un tableau, transformer ses
éléments et inclure les résultats dans un nouveau tableau.

• En règle générale, vous utilisez une boucle for pour

parcourir les éléments, transformer chacun d'eux et
pousser les résultats dans un nouveau tableau.

• La méthode map() crée un nouveau tableau rempli avec les

résultats de l'appel d'une fonction fournie sur chaque
élément du tableau appelant

• La méthode map() appelle la fonction fournie une fois pour

chaque élément d'un tableau, dans l'ordre.

• map() n'exécute pas la fonction pour les éléments vides.

• map() ne modifie pas le tableau d'origine.

Foreach
• En règle générale, lorsque vous souhaitez exécuter

une fonction sur chaque élément d'un tableau, vous

utilisez une instruction de boucle for. forEach() ne

mute pas le tableau sur lequel il est appelé.

• La méthode forEach() ne renvoie pas

nécessairement de résultat, mais exécute un effet.

• La méthode forEach() appelle une fonction une fois

pour chaque élément d'un tableau, dans l'ordre.

• forEach() n'est pas exécuté pour les éléments de

tableau sans valeurs.

Gestion des événements
(Handling Events)
Gestion des événements
en React
• La gestion des événements avec les éléments React est très similaire à la
gestion des événements sur les éléments DOM. Il existe quelques différences
de syntaxe : les événements commencent toujours par « on<event> », par
exemple onClick, onMouseEnter, onMouseLeave, onScroll, onDragStart,
onDragStop, ….

• Les événements React sont nommés en utilisant camelCase, plutôt qu'en

minuscules.

• Avec JSX, vous transmettez une fonction en tant que gestionnaire

d'événements, plutôt qu'une chaîne.

• Le problème avec cette syntaxe est qu'un rappel différent est créé à chaque
rendu du bouton. Dans la plupart des cas, c'est bien. Cependant, si ce rappel
est passé en tant que prop aux composants inférieurs, ces composants
peuvent effectuer un nouveau rendu supplémentaire. Nous recommandons
généralement de lier dans le constructeur ou d'utiliser la syntaxe des champs
de classe (fonction flèche Component), pour éviter ce genre de problème de
performances.
Passer des arguments aux gestionnaires
d'événements
• À l'intérieur d'une boucle, il est courant de vouloir passer un paramètre supplémentaire à un gestionnaire

d'événements. Par exemple, si id est l'ID de ligne, l'un des éléments suivants fonctionnera :

• Les deux lignes ci-dessus sont équivalentes et utilisent respectivement les fonctions fléchées et

Function.prototype.bind.

• Dans les deux cas, l'e-argument représentant l'événement React sera transmis comme deuxième argument après l'ID.

Avec une fonction fléchée, nous devons la transmettre explicitement, mais avec bind, tous les autres arguments sont

automatiquement transférés.
Événements synthétiques
• Vos gestionnaires d'événements recevront des instances de SyntheticEvent, un wrapper inter-navigateurs autour de

l'événement natif du navigateur. Il a la même interface que l'événement natif du navigateur, y

compris stopPropagation() et preventDefault(), sauf que les événements fonctionnent de la même manière sur tous

les navigateurs.
• Ici, e est un événement synthétique. React définit ces
événements synthétiques conformément aux
spécifications du W3C, vous n'avez donc pas à vous
soucier de la compatibilité entre navigateurs. Les
événements React ne fonctionnent pas exactement de
la même manière que les événements natifs.

• Lorsque vous utilisez React, vous n'avez généralement pas besoin d'appeler addEventListener pour ajouter des écouteurs à un

élément DOM après sa création. Au lieu de cela, fournissez simplement un écouteur lorsque l'élément est initialement rendu.