React.js est assez hype en ce moment et ça tombe bien, j'aime React et on va voir une introduction complète !

Lorsque j'ai appris React, c'était encore à peine annoncé par Facebook, sans trop de documentations... Heureusement, c'est fini ! Ou peut être pas !

Il y a de plus en plus de tutoriaux qui apparaissent sur le net, une documentation solide pour des devs, quelques free-lance qui partagent du savoir-faire, mais peu de choses sur les fondements. En gros, tout le monde s'y met sans réellement savoir par où commencer et en loupant des informations importantes.

Introduction à la dure, mais façon code ! No bullshit 😁

Tout cet article/tutoriel sera un peu survolé, on évitera les explications complexes qui ne peuvent pas rentrer ici. Promis, un jour j'en ferai des vidéos en formation ! 😛

On y verra tout ce qui est nécessaire pour que vous ayez la base de la base pour vous démerder avec la documentation après ! 😁

À la demande de Gregory sur la page de Facebook, merci à toi l'ami ! 💪

Développement web

Le développement Web est souvent vu comme un monde fou où la façon dont vous développez un logiciel est en écrivant des hacks sur des hacks. Je crois que React rompt avec ce modèle et a été conçu à partir du premier principe qui vous donne une base solide sur laquelle construire.

Une source majeure de bugs pour les applications front-end était la synchronisation du modèle de données avec le DOM. Il est très difficile de s'assurer que chaque fois que les données changent, toute l'interface utilisateur est mise à jour avec lui.

La première innovation de React a été d'introduire une représentation pure-JavaScript du DOM et d'implémenter une résolution des différences sur l'interface utilisateur, puis d'utiliser de gérer les événements simples: créer, mettre à jour, supprimer.

Avec React, en synchronisant tout les éléments de votre application à chaque fois que quelque chose change, non seulement vous avez du code qui est sûr par défaut, mais aussi moins de travail, car vous avez seulement besoin d'écrire le chemin de création : les mises à jour sont prises en charge.

Les navigateurs sont, depuis longtemps, incompatibles de différentes façons en raison de leur API de ce ils doivent supporter pour faire fonctionner le DOM.

Non seulement React fournit un excellent moyen de résoudre les différences de navigateurs, mais il permet des cas d'utilisation auparavant impossibles pour une bibliothèque front-end, tels que le rendu côté serveur et la possibilité d'implémenter des cibles de rendues comme iOS natif et Android.

La chose la plus importante à propos de React : non seulement vous l'utiliserez pour faire de superbes applications pour vos utilisateurs, mais cela fera également de vous un meilleur développeur. Les bibliothèques vont et viennent tout le temps et React ne sera probablement pas une exception. Ce qui le rend spécial, c'est qu'il vous enseigne des concepts qui peuvent être réutilisés tout au long de votre carrière.

Vous deviendrez meilleur en JavaScript parce que React ne vient pas avec un système de modèle de données. À la place, React vous pousse à utiliser toute la puissance de JavaScript pour créer votre interface utilisateur.

En ne faisant pas abstraction de la gestion des données, React vous obligera à réfléchir à la façon d'architecturer votre application et vous encourager à considérer des concepts comme l'immuabilité.

L'apprentissage de ces nouveaux concepts peut sembler étrange, mais donnez-leur 5 minutes et pratiquez-les jusqu'à ce que vous vous sentiez à l'aise.

Histoire

Développé en tant que prototype par Facebook en 2010 sous le nom FaxJS, la librairie a connu un développement poussé pour répondre à de nombreux problèmes dans le développement font-end. Tout le monde n'a pas les mêmes problèmes que Facebook.

Si on arrive à 100,000 utilisateurs en moins d'un an et qu'on atteint les 1 million, on est déjà les plus heureux ! De nombreux problèmes techniques arrivent au fur et à mesure que notre application scale avec notre marché.

Plus on code, plus on a de bugs. A l'époque, c'était à peine le début des applications JavaScript sur le client. Beaucoup de problèmes apparaissaient sur des designs patterns et de la façon dont gérer à la fois la structure de l'application et sa gestion des données dans un contexte où la performance est requise.

Pour pouvoir gérer l'ensemble de nos problèmes, nous développeurs, React a érigé un ensemble de concepts qui avaient pour but de résoudre des problèmes d'une application à très très grande échelle.

Petite anecdote, durant le développement de React, les nouveaux développeurs qui étaient embauchés devaient passer un mini-camp d'échange de savoir-faire avec l'équipe en charge de la librairie.

L'objectif premier de React a été depuis le début d'être facilement accessible aux développeurs qui ne sont pas des Facebookiens, en dehors de leur culture et de leurs standards, pour être sûrs et certains que cela aiderait un maximum de personnes à construire des applications robustes.

Il a fallu attendre 2013 pour avoir enfin une première version OpenSource et que tous puissent enfin créer une application web avec les standards de Facebook.

La version la plus stable de React est sortie en 2015, là où son adoption commence enfin à grandir !

DOM Virtuel

Quand on parle de créer une application web avec des animations, des changements en continu, et une grande quantité de données à gérer côté client, on s'attend à ce que notre code grossisse et devienne de plus en plus complexe.

Il a été compliqué pendant longtemps de créer une énorme plateforme, même pour les meilleurs d'entre-nous à l'époque. Organiser un projet, son architecture, l'infrastructure, les librairies à utiliser, etc... Un énorme défi !

React part d'un postula visant à simplifier la structure du code de nos applications : si nos pages web sont constituées d'HTML, alors pourquoi ne pourrions-nous pas gérer la structure de l'HTML directement JavaScript ? Pourrions-nous avoir toute l'arborescence de nos pages organisées dans une structure comme le DOM ?

À chaque fois que quelque chose change dans le DOM, puisque le DOM est représenté comme une structure arborescente, ces modifications des éléments modifiés, et celui des enfants doit passer par l'étape layout, puis les modifications doivent être repeintes ou recalculées graphiquement, ce qui est lent. Par conséquent, plus les éléments à recalculer / repeindre, plus votre application devient lente.

Ce que fait Virtual-DOM, il essaie de minimiser ces deux étapes, et obtenir ainsi une meilleure performance pour une grande application complexe.

En JavaScript Vanilla, lorsque nous faisons des opérations pour modifier le DOM (avec ou sans jQuery), à chaque fois que nous appelions une fonction notre code allait tout simplement reparcourir TOUT LE DOM puis faire sa modification puis le navigateur allait tout repeindre à chaque modification d'un élément du DOM. Imaginez que vous aillez 1000 éléments à modifier et afficher, cela peut devenir un réel problème de performance !

Illustration vulgarisée

Concrètement, le DOM Virtuel va conserver en mémoire de son côté une copie du DOM du navigateur, maintenir l'état des modifications et se mettre à jour, opérer les modifications sur le DOM du navigateur en fonction des mises à jour du DOM Virtuel. L'ensemble des modifications sont groupées pour éviter de faire repeindre plusieurs fois les éléments du DOM, on dit qu'il batch les modifications et le navigateur a déjà un ensemble d'éléments à repeindre plutôt que de faire l'opération X fois pour chacun.

Petite illustration du fonctionnement du DOM Virtuel

Cette méthode de rendu est inspiré de l'industrie du jeu vidéo, lorsqu'on veut afficher une forêt à 60fps, il n'est pas nécessaire d'envoyer un arbre par un arbre à la carte graphique pour créer une image par une image à assembler à la fin. On envoie plusieurs positions dans l'espace et paramètre avec un modèle pour créer une image avec toute une forêt.

C'est ce qu'on appelle un batch, en l'occurrence pour React c'est un batch de plusieurs modifications du DOM via le DOM Virtuel d'un coup !

Création d'applications

La raison pour laquelle j'adore React c'est qu'il est proche de la philosophie de base du web : tout peut changer constamment et être chaotique. React est là pour vous rendre capable de structurer et organiser vos applications web.

Voici un exemple d'application qu'on va décortiquer et utiliser tout au long de cet article.

Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Un simple menu de restaurant (parce que j'aime la nourriture) pour appréhender l'ensemble des concepts de base de React. Chaque plat est cliquable pour dévoiler une description.

On a tout ce dont nous avons besoin : affichage d'informations dynamiques, modification de l'état de l'application (au clic), et synchronisation des données par rapport à l'interface.

Quand on ouvre l'inspecteur de Chrome pour voir le code de cette application, on y voit juste du code HTML classique comme n'importe quel autre framework ou librairie qui vous permettrait de le faire en JavaScript :

Dès lors qu'on ouvre l'extension Chrome React Developer Tools, on remarque des nouvelles balises qu'on n’avait jamais vues avant : MenuRestaurant et Plat !

J'aime React parce que la transition entre du DOM HTML et le DOM Virtual de React est transparente, qu'il est capable de faire simplement des choses qui demanderaient beaucoup plus de lignes de codes, qu'il défend des concepts de création d'applications très flexibles et que chacun peut y trouver son bonheur. Pas trop de restrictions, beaucoup de possibilités !

Bien sûr qu'il y a des bonnes pratiques, parfois les standards sont faits pour être transformés et renouvellevés ! React en est la preuve.

Avant de vous montrer comment créer votre première application, survolons les concepts principaux de React au travers de cette mini-application :

  • les composants
  • les propriétés entre composants
  • l'interaction utilisateur
  • les états d'un composant

Composants, Propriétés et Interactions

Composants

Le concept principal de React est l'architecture orientée composant. Du fait que le DOM HTML soit une structure de données arborescente (un arbre quoi) chaque noeud peut avoir un ou plusieurs enfants. Les composants vont être utilisées de la même manière qu'on écrit un DOM HTML, on peut combiner des composants les uns dans les autres comme de poupées russes. Avec React, on décrit des classes d'objets qui représentent un noeud dans le DOM Virtuel. Un composant peut avoir plusieurs enfants d'autres composants ou tout simplement des balises HTML. C'est-à-dire qu'on écrit une syntaxe qui ressemble à de HTML dans du code JavaScript !

//  Une classe qui est étendue d'un autre classe Component (issue de la librairie de React)
class MenuRestaurant extends React.Component {
  //  Une fonction "render" qui retourne la structure à afficher à l'utilisateur
  render() {
      // Dans le return, on peut écrire de l'HTML ou référencer un autre Composant
      return (
         <div>
           Bienvenue, voici notre carte :
         </div>
      )
  }
}
Bienvenue, voici notre carte :

Note : au début de son histoire, cette syntaxe appelée JSX avait fait débat avant de s'imposer !

Comment écrire un composant dans un autre composant ? Notre menu de restaurant à besoins de plats !

// 💥 On écrit un autre composant !
class Plat extends React.Component {

   render() {
      return(
      	<div>
          Nom d'un plat
      	</div>
      );
   }

}
Nom d'un plat

Nous avons maintenant notre classe d'objet Plat prêt à être appelé dans notre MenuRestaurant :

// 💥 On appel notre Plat plusieurs fois dans notre MenuRestaurant
class MenuRestaurant extends React.Component {
  render() {
      // On écrit "comme si" notre composant Plat était une nouvelle balise en HTML
      // Même plus besoin d'utiliser "new" pour instancier, React s'en occupe dans sa syntaxe JSX
      return (
         <div>
           Bienvenue, voici notre carte :
           <Plat/>
           <Plat/>
           <Plat/>
           <Plat/>
         </div>
      )
  }
}
Bienvenue, voici notre carte :
Nom d'un plat
Nom d'un plat
Nom d'un plat
Nom d'un plat

C'est bien beau tout ça, mais on affiche que "Nom d'un plat" au lieu d'un vrai nom de plat.

Comment notre composant Plat peut-il devenir générique pour afficher le nom d'un plat ?

Propriétés

Il est possible, à la manière d'une fonction, de donner des paramètres à un composant. Ces paramètres sont appelés des props pour properties.

Exactement comme en HTML, on peut ajouter des attributs à une balise. Ajoutons donc une props du nom de name à notre composant Plat pour pouvoir l'afficher !

Il y a deux manières pour donner un paramètre à une propriété à un composant, la première sous forme de string ou sous forme d'objet. Ici, on veut juste donner une string !

class MenuRestaurant extends React.Component {
  render() {
  	  // "name" est une propriété de Plat, comme un argument pour une fonction
      return (
         <div>
           Bienvenue, voici notre carte :
           <Plat name="Pizza 🍕" />
           <Plat name="Tacos 🌮" />
           <Plat name="Maki 🍙" />
           <Plat name="Sandwish 🥪" />
         </div>
      )
  }
}

Puis, écrivons comment cette propriété name va être affichée dans Plat !

Un composant qui reçoit des props (propriétés) peut récupérer leurs valeurs via sa propre propriété props donc avec un this.props.variable.

class Plat extends React.Component {

   render() {
      // On récupère "name" dans une variable
      let name = this.props.name;
      return(
      	<div>
          Nom d'un plat
      	</div>
      );
   }

}

Pour pouvoir afficher une variable dans le JSX d'un composant, il faut utiliser une syntaxe avec des accolades, comme avec un objet : { }

class Plat extends React.Component {

   render() {
      let name = this.props.name;
      return(
      	<div>
          {
          	// Les accolades vous permettent d'injecter une variable qui peut être affiché
          	name
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Tadam ! On vient d'écrire nos premiers composants !

Toute la philosophie de React est de communiquer des données du haut vers le bas, d'un parent vers ses enfants.

On vient de voir le concept principal de React : les composants. Un Composant peut être réutilisé facilement dans votre code, ce qui permet d'améliorer le découpage de votre application. On peut écrire du code HTML dans un composant et référencer un autre composant dans un composant, de cette manière l'arborescence du DOM Virtual peut à React d'afficher dans votre navigateur un DOM HTML à afficher.

Si vous voulez savoir comment on écrit des commentaires dans le jsx, je vous invite à voir l'article sur ce sujet !

Maintenant, comment on peut cliquer sur nos plats et créer notre première interaction utilisateur ?

Interactions

Dans React, lorsque vous écrivez du JSX avec des balises HTML, vous n'avez plus à écrire plusieurs lignes pour récupérer une div, lui ajouter un listener, puis assigner une fonction pour répondre à un clic. L'ensemble des fonctions du DOM HTML proposées par votre navigateur peut être déclaré sur votre div directement dans le JSX.

Imagions qu'on aimerait pouvoir cliquer sur nos plats et déclencher une fonction :

class Plat extends React.Component {

   render() {
      let name = this.props.name;
      // On ajoute une props nommée en camel case, en utilisant des accolades pour assigner une valeur
      // Ici, on y ajoute une fonction fléchée
      return(
      	<div
           onClick={() => {
             alert(name);
           }}
      	>
          {
          	name
          }
      	</div>
      );
   }

}

React va vous demander d'écrire en camel case, c'est-à-dire avec une minuscule puis une majuscule pour les mots suivants. Vous verrez, on s'y fait vite !

Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

On est en train de dire à React : "Hey, si quelqu'un clique sur le div, alors tu déclenches la fonction que je t'ai décrite".

On peut appeler toutes les fonctions qu'on trouverait dans la documentation JavaScript sur l'interaction avec une balise.

Dans la vraie vie, on devrait éviter d'écrire la fonction directement dans le onClick, on écrirait la fonction en tant que membre de la classes lui on la référencerait au onClick :

class Plat extends React.Component {

   onClickPlat() {
      alert(this.props.name);
   }

   render() {
      let name = this.props.name;
      return(
      	<div
           onClick={this.onClickPlat}
      	>
          {
          	name
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Si vous ouvrez la console de votre navigateur, vous verriez : "Uncaught TypeError: Cannot read property 'props' of undefined".

Pourquoi ? Comment ? Doit-on jeter React par la fenêtre ? WTF ? Du calme ! Ce n'est pas la faute à React, blamez JavaScript si vous voulez. Ahah :p

Regardons ce qui se passe pour comprendre la situation et y trouver une solution. On va faire simple et vulgarisé, un article y sera dédié !

La fonction onClickPlat est exécutée dans le contexte d'une div via une propriété onClick, il s'agit d'une props que React prendra en charge pour assigner l'événement. Ce qui signifie que le this du composant Plat n'est pas le même que le this de la div.

Le contexte de this n'est plus le même

Pour résoudre cette histoire de contexte de this lors de l'exécution de la fonction, nous devons utiliser une méthode sur l'objet de la fonction onClickPlat, cette méthode est bind !

Une fonction bindé en JavaScript est une fonction liée à un contexte donné. Cela signifie que peu importe comment vous l'exécutez, le contexte d'exécution restera le même. La seule exception est l'opérateur new qui renvoie toujours un nouveau contexte.

Pour créer une fonction bindé à partir d'une fonction régulière, la méthode bind est utilisée. La méthode bind prend le contexte auquel vous souhaitez lier votre fonction en tant que premier argument. Les autres arguments sont des arguments qui seront toujours transmis à la fonction. Il renvoie une fonction bornée au contexte souhaité.

Voici comment l'utiliser et résoudre notre situation de contexte :

class Plat extends React.Component {

   onClickPlat() {
   	  // Notre this est désormais l'instance de Plat
   	  // et non l'instance de la div
      alert(this.props.name);
   }

   render() {
      let name = this.props.name;
      // .bind(this) : on assigne le contexte de l'exécution de la fonction
      // au contexte de l'instance du composant Plat
      return(
      	<div
           onClick={this.onClickPlat.bind(this)}
      	>
          {
          	name
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Désormais, vous savez comment écrire des fonctions qui interagissent parfaitement avec l'utilisateur !

On reviendra bientôt en détail sur les aspects du binding de fonctions dans un prochain article 😀

États d'un composant

Dernier concept avant de voir comment vous pouvez vous amuser avec ça aussi : les états d'un composant. Ce concept est fondamental pour utiliser React, si vous devez relire cette partie plusieurs fois, n'hésitez pas !

Dans une page web, vous devez pouvoir gérer tout un tas de données : des variables, des tableaux, des objets, etc... Vous devez aussi modifier ces données en fonction de l'interaction de l'utilisateur, s'il clique sur le nom d'un plat alors on devrait pouvoir afficher des détails des ingrédients pour l'élément sélectionné.

Un état est essentiellement juste un objet du nom de state qui est la propriété d'un composant qui stocker toutes les données que ce composant ou peut être ses enfants ont besoins.

Dans une application JavaScript Vanilla, si on clique sur un bouton pour ajouter au panier un plat qu'on vient de sélectionner, il faudrait modifier plusieurs éléments du DOM pour synchroniser le prix total, la liste des plats, etc... C'est un cauchemar à maintenir.

Avec React, la règle d'or est de ne pas toucher au DOM, on veut juste mettre à jour nos données et laisser React s'occuper de réafficher notre DOM. Vous avez juste à stocker vos données dans un état, et si l'état change, les composants affectés par cet état vont être mis à jour automatiquement.

Modifions notre composant MenuRestaurant pour lui ajouter un état qui contiendra un tableau foods qui lui même contiendra des objets de nos plats.

class MenuRestaurant extends React.Component {

   //	Notre état
   state = {
      foods: [
         {
         	id: 0,
         	name: "Pizza 🍕",
         	description: "Une belle margaritha !"
         },
         {
         	id: 1,
         	name: "Tacos 🌮",
         	description: "Oignons, haricots noirs, légumes et salsa !"
         },
         {
         	id: 2,
         	name: "Maki 🍙",
         	description: "Avocat et saumon"
         },
         {
         	id: 3,
         	name: "Sandwish 🥪",
         	description: "Végé pâté aux tomates"
         }
      ],
   }

   render() {
      // ... le code qu'on a vu avant
   }

}

Puis, vous pouvez utiliser ces données de l'état d'un composant pour afficher des données plus dynamiques.

Vous pouvez accéder à state de la même manière que props.

Par exemple, nous pouvons maintenant utiliser notre tableau pour afficher nos composants Plat !

class MenuRestaurant extends React.Component {

   //	Notre état
   state = {
      foods: [
         {
         	id: 0,
         	name: "Pizza 🍕",
         	description: "Une belle margaritha !"
         },
         {
         	id: 1,
         	name: "Tacos 🌮",
         	description: "Oignons, haricots noirs, légumes et salsa !"
         },
         {
         	id: 2,
         	name: "Maki 🍙",
         	description: "Avocat et saumon"
         },
         {
         	id: 3,
         	name: "Sandwish 🥪",
         	description: "Végé pâté aux tomates"
         }
      ],
   }

   render() {
     return (
       <div>
           Bienvenue, voici notre carte :
           {
             // Ici nous utilisons .map pour retourner une tableau de composants Plat
             // Une fonction fléchée nous permet de récupérer l'élément parcouru
             // Puis d'assigner un composant Plat et ses props à partir de l'élément
             // Pour faciliter l'écriture, on assigne l'ensemble de l'objet à une props
             this.state.foods.map((food) => <Plat food={food}/>)
           }
        </div>
     )
   }

}
class Plat extends React.Component {

   onClickPlat() {
      alert(this.props.food.name);
   }

   render() {
      // Ce qui change un peu notre code ici maintenant :)
      return(
      	<div
           onClick={this.onClickPlat.bind(this)}
      	>
          {
          	this.props.food.name
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

On vient de voir qu'on peut facilement utiliser des données d'un composant pour afficher dynamiquement des données issues de son état !

Comment modifier un état ? Qu'est-ce qui se passe ?

Imaginons qu'on veut pouvoir cliquer sur un Plat pour voir sa description, si un Plat est sélectionné alors on s'affiche sa description.

Selon cette fonctionnalité, on va devoir avoir un moyen de faire comprendre à MenuRestaurant qu'un Plat se sent concerné par le fait d'avoir été cliqué dessus.

De la même manière qu'on a vue qu'il est possible de donner des variables en props à un composant enfant, on peut très bien lui donner une fonction, non ? Oui !

class MenuRestaurant extends React.Component {

   //	Notre état
   state = {
      foods: [
        // ... blablabla, on va s'éviter de trop scroller !
      ],
   }

   onPlatClicked(id) {
      alert(id);
   }

   render() {
     return (
       <div>
           Bienvenue, voici notre carte :
           {
             // On rajoute une variable onClick avec notre nouvelle fonction dans MenuRestaurant
           	 // Elle voudrait récupérer l'id du plat qui s'est fait cliqué dessus !
             this.state.foods.map((food) => <Plat name={food.name} onClick={this.onPlatClicked.bind(this)} />)
           }
        </div>
     )
   }

}

Alors oui, ça peut prêter à confusion ce petit onClick sur Plat ! Ici, c'est NOUS qui avons décidé de l'appeler onClick, React ne va rien faire automatiquement et ce sera à nous d'implémenter cette variable onClick passée en paramètre du composant Plat.

Continuons notre travail en continuant implémentation de la variable onClick qui s'est vu assigné une fonction onPlatClicked issue du contexte de MenuRestaurant pour le composant Plat.

class Plat extends React.Component {

   onClickPlat() {
      // On peut facilement implémenter notre fonction
      // On reçoit une variable "onClick" dans notre "props"

      // Si on a une props "onClick", alors...
      if (this.props.onClick) {
      	 // On déclencher la fonction "onClick" en donnant en paramètre l'id du plat
         this.props.onClick(this.props.food.id);
      }
   }

   render() {
      // ON N'A RIEN CHANGE ICI !
      return(
      	<div
           onClick={this.onClickPlat.bind(this)}
      	>
          {
          	this.props.food.name
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

On vient de voir qu'on peut passer une fonction en paramètre, faire une implémentation sur un composant enfant qui renvoie l'information au parent.

On pourrait réutiliser le composant Plat dans plein d'autres composants qui utiliseraient la propriété onClick comme API du composant.

La réutilisation peut vraiment se pousser beaucoup plus loin, maiiiiiis on verra ça en vidéo plutôt, hein ? 😛

Maintenant, implémentons notre affichage de description d'un Plat sélectionné avec la même philosophie !

Pour modifier l'état d'un composant, un composant dispose d'une fonction setState qui va prendre en paramètre un objet qui va muter l'état actuel du composant.

class MenuRestaurant extends React.Component {

   state = {
      foods: [
        // ....
      ],
      // Gardons une variable qui va définir quel est le dernier plat cliqué !
      foodSelected: -1
   }

   onPlatClicked(id) {
   	  // La fonction setState va propager la modification dans l'état de MenuRestaurant
   	  // React se charge de faire la différence entre l'objet que vous donnez et l'état actuel
      this.setState(
        {
        	// Pas besoin de mettre tout l'objet, React calculera les différences et modifiera l'état
        	foodSelected: id
        }
      );
   }

   render() {
     return (
       <div>
           Bienvenue, voici notre carte :
           {
           	 // Rajoutons une propriété qui vérifie la condition suivante
             // Si l'id du plat est égale à l'id dans l'état MenuRestaurant, alors on affichera la description
             this.state.foods.map((food) => <Plat
                                                   showDescription={this.state.foodSelected == food.id}
                                                   name={food.name}
                                                   onClick={this.onPlatClicked.bind(this)}
                                            />
                                  )
           }
        </div>
     )
   }

}

Chose importante à savoir, une fois que setState a défini son exécution, le composant réexécutera automatiquement la fonction render. Notre composant va donc recalculer ce qu'il devrait afficher avant que React le propage dans le vrai DOM du navigateur. Vous vous rappelez l'histoire du DOM Virtuel au début ? 😀

Puis, modifions Plat pour comprendre en compte la nouvelle propriété showDescription !

class Plat extends React.Component {

   onClickPlat() {
      // ... le code de la fonction de tout à heure
   }

   render() {
      return(
      	<div
           onClick={this.onClickPlat.bind(this)}
      	>
          {
          	this.props.food.name
          }
          {
          	// On peut écrire une fonction directement dans l'accolade !
          	// Si showDescription est vrai, alors on affiche sinon on n'affiche rien !
          	this.props.showDescription ?
          	    <div><b>{this.props.food.description}</b></div>
          	  :
          	    null
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Styliser

Il y a plusieurs manières de changer le style des balises. La syntaxe JSX vous permet de le faire directement sur vos balises avec la props : style.

L'ensemble des mots clefs de votre CSS doit respecter la syntaxe du camel case, c'est-à-dire une minuscule pour le premier mot, majuscule pour les suivants et le tout attaché !

La props style requiert un objet en paramètre.

class Plat extends React.Component {

   onClickPlat() {
      // ... le code de la fonction de tout à heure
   }

   render() {
      return(
      	<div
           onClick={this.onClickPlat.bind(this)}
           style={{
              padding: 5,
              marginLeft: "5%",
              backgroundColor: this.props.showDescription ? "rgb(225, 225, 225)" : "transparent"
           }}
      	>
          {
          	this.props.food.name
          }
          {
          	this.props.showDescription ?
          	    <div><b>{this.props.food.description}</b></div>
          	  :
          	    null
          }
      	</div>
      );
   }

}
Bienvenue, voici notre carte :
Pizza 🍕
Tacos 🌮
Maki 🍙
Sandwish 🥪

Comme on le voit :

  • Pas besoin de spécifier nécessairement px
  • Il faut utiliser une string pour unités autre que px
  • On peut même faire des conditions !

La nature déclarative et data-driven de React facilite grandement la réutilisation du code, j'en reviens généralement à plus de 3/4 de mon code réutilisé ! Ce qui est dingue quand on y pense ! Il y a quelques années en arrière, on aurait difficilement imaginé un tel scénario...

Création de votre première application

Prêt à enfin avoir cette application sur votre machine ?

Si votre environnement Node.js est à jour et prêt, installez ce package depuis votre terminal :

npm install -g create-react-app

Sur votre terminal, rendez-vous dans votre dossier de projets puis :

create-react-app ./introduction-react

Plein de choses vont s'installer ! Tout votre environnement préconfiguré sera bientôt installé.

On va voir comment utiliser ces deux commandes :

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

Avec votre terminal, rentrez dans le dossier nouvellement créé puis exécutez :

yarn start

Cette commande va créer un serveur de développement pour vous permettre de rapidement commencer à coder !

Yay! Tout marche ! 🎉

Maintenant, ouvrez votre IDE favori pour ouvrir le dossier en question pour passer au code.

Vous allez tout de suite voir plusieurs dossiers :

  • node_modules : pour les packages Node.js (duuuuh)
  • public : les fichiers statiques de votre application
  • src : le code de votre application

Vous avez tout le nécessaire pour commencer à créer une application React, vous pouvez installer les packages que vous souhaitez pour développer votre application ! Pour le moment, déployons ensemble le code de notre article !

Si vous observez bien, vous verrez un fichier index.js

Il s'agit tout simplement d'un des fichiers automatiquement générés permettant l'exécution de votre application dans la page web située dans le dossier public.

Vous remarquerez que React n'a besoin que d'un div pour déployer votre application ! Le module create-react-app a déployé tout un tas d'outils pour faciliter votre apprentissage et la création de vos premières applications web. Lorsque vous serez un expert, vous n'aurez probablement plus besoin de ce module, mais uniquement d'un savoir-faire hors pair sur WebPack !

L'application que vous voyez dans votre navigateur n'est constituée que ce fichier ! Un simple composant qui structure un peu d'HTML et qui importe un fichier ./App.css : oui, on peut importer du CSS, mais on verra ça un autre jour vu que c'est une introduction ! 😃

Je vous invite à modifier n'importe quel texte ou à supprimer puis remettre des bouts du DOM dans le return de la fonction render pour remarquer que les changements sont automatiquement pris en compte dans votre navigateur ! C'est magique et ça s'appelle le hot reloading !

Exactement ce que je ressens que je code 😆

Créons un nouveau fichier Plat.js dans le dossier src pour enfin ajouter notre premier composant !

// ./src/Plat.js
import React from "react";

// Puisqu'il s'agit de Node.js, Plat.js est un module
// Il faut donc exporter par défaut la classe de notre composant !
export default class Plat extends React.Component {
  onClickPlat() {
    if (this.props.onClick) {
      this.props.onClick(this.props.food.id);
    }
  }

  render() {
    return (
      <div
        onClick={this.onClickPlat.bind(this)}
        style={{
          padding: 5,
          marginLeft: "5%",
          backgroundColor: this.props.showDescription
            ? "rgb(225, 225, 225)"
            : "transparent"
        }}
      >
        {this.props.food.name}
        {this.props.showDescription ? (
          <div>
            <b>{this.props.food.description}</b>
          </div>
        ) : null}
      </div>
    );
  }
}

Importons maintenant notre fichier/composant dans le fichier ./App.js et modifions un peut le code pour voir si tout marche bien comme prévue !

Et Oh ! surprise !

Tout s'affiche comme on le voulait ! Remplaçons maintenant notre classe App par notre MenuRestaurant !

N'oubliez pas de changer le export default App par export default MenuRestaurant. J'ai pris soin de supprimer les deux import inutiles !

Voilà ! Notre application est enfin affichable et utilisable !

On s'occupe de la mettre en ligne ? Je vous montre un petit truc gratuit et sympa pour faire tester vos applications à votre amis et/ou clients ? 😛

Commençons par builder notre application ! Arrêtez le serveur de développement qu'on a lancé avec yarn start puis exécutez cette ligne :

yarn build

Tout un script va se lancer pour préparer votre application être déployable sur le net !

Un dossier build vient de se créer, ça tombe bien c'est ce dossier qu'on va mettre en ligne !!

Avec votre terminal, rendez-vous dans ce dossier !!

Je suis un fan de Surge.sh ! Ils proposent une CLI Node.js pour déployer rapidement un projet statique en ligne et gratuitement !

Installons leur ligne de commande :

npm install --global surge

C'est bon ? Tout est prêt ? Votre terminal se trouve dans le dossier /introduction-react/build ?

Exécutez la commande surge !

surge

Vu que c'est votre première fois, il va vous demander de vous connecter ou de vous enregistez, faites-le !

Une fois que vous êtes enregistré, il va vous proposer de choisir le dossier, vu que vous êtes déjà sur le bon, appuyez sur entrer ! Puis, le domaine sur lequel vous voulez héberger ! Il s'agit d'un nom aléatoire que vous pouvez changer, n'hésitez pas à avoir un peu de fun 😛

On attend quelques secondes ou minutes, selon votre connexion internet !

Tadam ! 🎉 Votre application est en ligne !

Rendez-vous sur http://aaaaaaaaaaaaahhhhhh-pizzzzzaaaaaaaaaaa.surge.sh/ !

Conclusion

Voici toute la base de la base de la philosophie de React.

Vous pouvez trouver le code final de cet exemple sur CodeSandbox ! Si vous installez l'extension React Developer Tools, inspectez le prévisualisateur de l'application pour bien voir la screenshot du début de l'article !

Si vous souhaitez expérimenter avec React, je vous recommande d'utiliser CodeSandbox qui déploiera dans votre navigateur tout l'essentiel pour apprendre React.

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉