Introduction à React, partie 1

Nous avons déjà parlé dans ce blog de la nouvelle pile de développement de WordPress et de la révolution qui l'accompagne, tant pour la plate-forme elle-même que pour les développeurs qui sont désormais obligés d'apprendre de nouvelles choses. Il n'y a pas longtemps, par exemple, j'ai publié un article expliquant comment utiliser le package @wordpress/scripts pour étendre Gutenberg et ajouter un bouton à son interface utilisateur. En tant qu'auteur, j'aime écrire des tutoriels parce que je peux partager quelque chose que je connais bien et j'ai l'impression que nous pouvons apprendre tous ensemble.

Malheureusement, je pense que les tutoriels cachent un gros problème : vous êtes nombreux à les suivre aveuglément sans vraiment comprendre ce qu'il se passe, même si vous obtenez le résultat correct au final. Mais la plupart des didacticiels manquent du «moment aha», le moment de perspicacité et de compréhension où tout clique dans votre tête et vous comprenez pourquoi les choses sont comme elles sont.

Alors aujourd'hui, j'aimerais commencer une série d'articles avec une introduction à React pour apporter un peu de lumière. Je veux démystifier React et vous aider à vous améliorer rapidement. Je veux que vous compreniez pourquoi React est comme ça et pourquoi les choses sont comme elles sont. Je veux que vous compreniez les principes derrière React. Je veux que vous écriviez un meilleur code.

Programmation fonctionnelle

Avant de parler de React, je pense qu'il vaut la peine de passer quelques minutes à parler de programmation fonctionnelle , car de nombreux frameworks que nous utilisons aujourd'hui reposent sur ses principes. Et React (avec Redux) ne fait pas exception.

La programmation fonctionnelle est un paradigme de programmation dans lequel les programmes sont construits en appliquant et en composant des fonctions. Vous pensez peut-être que la « programmation » a toujours consisté à créer et à exécuter des fonctions, n'est-ce pas ? Pas exactement. Ours avec moi.

Considérons, par exemple, la programmation orientée objet. En POO, les programmes sont construits en créant et en composant des objets, qui peuvent contenir des données, sous forme d'attributs ou de champs, et du code, sous forme de méthodes ou de procédures. Voir? Pas des fonctions, mais des objets.

Alors, qu'est-ce qui rend la programmation fonctionnelle spéciale ? Eh bien, il y a plusieurs aspects qui caractérisent la programmation fonctionnelle : fonctions pures, transparence référentielle, immuabilité, fonctions en tant que citoyens de premier ordre, fonctions d'ordre supérieur, etc., et je vous recommande de les étudier par vous-même (ou, si vous voulez à, nous pourrons en parler dans de futurs articles). Mais, pour que cet article soit court, nous allons nous concentrer aujourd'hui sur une seule fonctionnalité…

Fonctions pures

L'une des choses qui différencie la programmation fonctionnelle des autres paradigmes de programmation est la façon dont elle définit et fonctionne avec les fonctions. En FP, les fonctions sont pures, ce qui signifie qu'elles remplissent les deux conditions suivantes :

1. Il produit toujours le même résultat lorsqu'on lui donne les mêmes arguments
2. Cela n'a pas d'effets secondaires

Par exemple, ce n'est pas une fonction pure :

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

car il a plusieurs effets secondaires. À savoir, il modifie une variable globale (effet secondaire 1) et il affiche du texte sur la console (effet secondaire 2).

Une autre fonction impure est la suivante :

 function createElement( name ) { const id = Math.random(); return { id, name }; }

car, comme vous pouvez le voir, cela ne produit pas toujours le même résultat. Chaque fois que l'on appelle createElement avec un certain nom, le résultat obtenu est différent. Après tout, l'attribut id est généré via Math.random …

Les fonctions pures sont excellentes pour plusieurs raisons : elles sont simples à comprendre et ne contiennent aucune surprise. Vous leur donnez des entrées, ils vous renverront une sortie spécifique. Et c'est formidable, car cette façon de définir les fonctions les rapproche de notre compréhension mathématique de ce qu'est une fonction : elle associe chaque entrée à une sortie bien définie.

Composants dans React

Qu'est-ce que les fonctions pures et la programmation fonctionnelle ont à voir ? Eh bien, voyons si nous pouvons déduire leur relation…

Comme vous pouvez le lire dans sa documentation, React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur via de petits morceaux de code appelés "Composants". C'est le premier composant que vous verrez dans leur tutoriel :

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Assez simple et même explicite, n'est-ce pas?

Mais attendez une seconde ! Cela ne ressemble pas du tout à une "fonction pure". En fait, il s'agit d'une classe implémentée à l'aide de la programmation orientée objet.

Ouais, tu as tout à fait raison. Cela n'a pas l'air bien… Avons-nous juste perdu notre temps à parler de programmation fonctionnelle ?

Reprenez le composant précédent. À quoi cela ressemble-t-il? Qu'est ce que ça fait? Eh bien, c'est une classe avec une seule méthode ( render ) qui génère du code HTML pour afficher une liste de courses. Cette liste de courses est toujours la même (duh, c'est un exemple simple), mais elle a une partie variable : son titre, où la classe semble utiliser une propriété interne this.props.name .

Donc, si nous ne savons encore rien de React et que nous ne regardons que le code et essayons de déduire ce qu'il fait, nous voyons ce qui suit :

1. Le composant peut recevoir un « nom ». Nous ne savons pas exactement comment il obtient ce nom, mais nous savons que c'est le cas. Après tout, this.props.name est un très bon indice.
2. La méthode de render produit du code HTML pour afficher une liste (statique) d'"éléments d'achat": Instagram , WhatsApp et Oculus .
3. Le HTML résultant n'est pas statique à 100 % ; il utilise un "nom" qui peut varier en fonction de la valeur d'une propriété.

Vous voyez où je vais ?

Fonctions des composants dans React

Nous venons de décrire une fonction pure ! Nous avons un composant qui prend une valeur ( name ) et produit une sortie bien définie (le HTML). Cela signifie-t-il que nous pouvons nous éloigner de la POO et implémenter le composant précédent en tant que fonction ?

Sûr! La classe trop compliquée que nous venons de voir peut être réécrite comme une fonction pure plus simple et plus facile à comprendre qui reçoit props et renvoie du HTML :

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

C'est exactement la même chose que nous avions, mais beaucoup plus simple. J'oserais même dire que c'est la chose la plus simple que je puisse implémenter en tant que programmeur : un composant React n'est rien de plus qu'une fonction qui prend quelques props et produit un HTML out .

Et c'est précisément la première leçon que vous devez apprendre : votre composant React est une pure fonction : props in, HTML out. Un composant ne doit pas exécuter de fonctions asynchrones pour récupérer des données (car ce sont des effets secondaires). Un composant ne peut pas non plus modifier les propriétés qu'il reçoit (immuabilité).

Donc, encore une fois : un composant prend simplement quelques accessoires et produit la sortie HTML. Point final.

Mais attendez, si un composant est aussi simple, comment pouvons-nous faire quoi que ce soit d'utile avec lui ? Eh bien, restez à l'écoute, car nous en reparlerons dans le prochain article !

Image sélectionnée par Josiah Weiss sur Unsplash.