Route pour réagir

Dec 01 2022

React est l'une des meilleures bibliothèques Javascript utilisées pour créer des applications Web. Pour saisir React, nous devons comprendre comment cela fonctionne derrière le capot.

Photo de Ksenia Yakovleva sur Unsplash

React est l'une des meilleures bibliothèques Javascript utilisées pour créer des applications Web. Pour saisir React, nous devons comprendre comment cela fonctionne derrière le capot. Dans cet article, examinons les fondamentaux de React, l'API React brute, son fonctionnement interne et enfin créons un composant React réutilisable.

Je suppose que vous avez une compréhension de base des concepts Javascript et HTML DOM. Sinon, vous pouvez parcourir ces concepts ici : Guide Javascript , Introduction au DOM .

Passons maintenant à notre sujet !!

Comment une page Web est-elle créée ?

Avez-vous déjà été curieux de savoir comment fonctionne le Web ? Que se passe-t-il une fois que vous avez saisi l'URL d'un site Web et cliqué sur Entrée ? Comment pouvez-vous voir cette page Web sur notre écran ? Examinons-le étape par étape.

1. Une fois que vous avez recherché un site Web, une requête HTTP est envoyée au serveur.

2. Le serveur enverra les fichiers du site Web.

3. Le navigateur analysera ces fichiers. Au début, un fichier HTML est analysé, puis les fichiers CSS et JavaScript sont analysés.

4. Le navigateur construit le DOM à partir du code HTML analysé et l'affiche à l'écran.

C'est ainsi qu'une page Web s'affiche sur votre écran (il existe d'autres concepts comme le serveur DNS et le protocole HTTP, mais ce n'est pas notre domaine de préoccupation). C'est aussi simple que ça, mais attendez, c'est quoi ce DOM ? D'où vient-il? Allons-nous explorer un peu DOM ?

DOM fait référence au Document Object Model, qui représente un document HTML avec une arborescence logique. Chaque branche contient des nœuds et chaque nœud contient des objets. Les méthodes DOM permettent d'accéder au DOM. Avec ces méthodes, vous pouvez modifier la structure et le contenu du document.

Comme nous le savons tous, HTML est le bloc de construction de base du Web, et nous pouvons créer des pages Web en utilisant HTML. Créons une page Web simple affichant "Hello world !!" comme indiqué ci-dessous:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Pour permettre à javascript d'interagir avec le DOM, nous devons ajouter une balise de script dans le fichier HTML, et vous pouvez écrire du code pour créer, supprimer ou mettre à jour les éléments dans le DOM (c'est ce que nous appelons la manipulation du DOM).

Examinons un code JavaScript qui interagit avec le "Hello World !!" créé ci-dessus page et change son contenu en "Wassup World !!".

Création d'éléments HTML avec Javascript :

Comme nous avons vu que nous pouvons modifier des éléments HTML via javascript, essayons de créer une page Web contenant une div avec "root" comme identifiant et h1 comme enfant de la div. h1 contient "Hello World !!". Le code se trouve dans le bac à sable ci-dessous.

Mais créer des éléments via Javascript est impératif. Pour accomplir cette tâche, nous devons fournir à Javascript des instructions étape par étape. Par exemple, si vous souhaitez créer un div avec un identifiant, vous devez d'abord créer cet élément div , puis définir l'attribut id , et enfin ajouter ce div à son parent. C'est déjà trop de travail. Et s'il y avait un moyen de dire à JavaScript uniquement quel élément créer plutôt que comment le créer (approche déclarative) ? Cela réduit beaucoup de code JavaScript. Ça sonne bien, non ? Mais comment y parvenir ? Quelle est cette approche impérative et déclarative ?

La programmation impérative est la façon dont vous faites quelque chose, et la programmation déclarative ressemble plus à ce que vous faites. Voici un bel article sur la programmation impérative vs déclarative .

React est un langage déclaratif, c'est-à-dire qu'il nous permet d'écrire du code sans se soucier de la façon dont les choses se passent sous le capot.

Voyons donc comment la programmation déclarative peut nous faciliter la vie.

Un aperçu de l'API React :

L'API React inclut des méthodes pour manipuler le DOM. par exemple, React.createElement() et ReactDOM.render(). Considérez la méthode React.createElement() comme l'équivalent de document.createElement() et ReactDOM.render() comme document.append(). Examinons en profondeur ces méthodes.

React.createElement() prend deux arguments : l'élément à créer et les props. Si vous souhaitez créer une balise div simple avec l'identifiant "root" et le texte "Hello World!" à l'intérieur, cela ressemblera à ceci:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React est le point de départ pour utiliser React dans votre code. Vous pouvez l'installer en tant que package via npm ou utiliser les fichiers de script disponibles sur unpkg.com . Utilisons des fichiers de script dans notre exemple de code, car nous n'avons pas besoin de nous soucier de les installer.

Maintenant, recréons le même "Hello World !!" page avec l'API React.

L'accessoire enfant pour React.createElement() peut être du texte brut ou un autre élément, c'est ainsi que nous créons des éléments imbriqués. Pour illustrer, considérez le code HTML suivant : un div comme conteneur qui contient un autre div comme enfants. La balise div enfant contient deux balises span avec le texte "Hello" et "World". Lien vers codeSandbox

créer des éléments imbriqués avec l'API React

Pour créer des éléments imbriqués, nous devons utiliser des méthodes imbriquées, ce qui rend très difficile la lecture et la compréhension du code.
Nous avons donc besoin d'un code plus lisible. Existe-t-il un autre moyen de rendre le code lisible? Et si nous pouvions écrire une syntaxe de type HTML au lieu d'utiliser l'API React ? JSX entre en scène ici. Passons quelques minutes à découvrir JSX.

JSX :

JSX est une syntaxe de type HTML (mais pas HTML), qui est du sucre syntaxique par rapport à votre API React brute. Vous pouvez écrire toutes ces méthodes React dans une syntaxe simple de type HTML à l'aide de JSX.

Puisque JSX n'est pas Javascript, vous devez le transpiler en JavaScript, qui est compris par le navigateur.

Babel est le transpileur qui transpile JSX en Javascript. Tout le JSX est converti en l'API React par Babel, comme indiqué ci-dessous.

Babel transpile JSX en Javascript

Comme on le voit dans l'image précédente, <div id="root"> est converti en React.createElement("div",{id:"root"},children). C'est ainsi que Babel convertit JSX en API React.

Pour utiliser Babel dans notre projet, nous devons utiliser un fichier de script de unpkg.com, et nous pouvons commencer à écrire JSX à l'intérieur de la balise de script en mentionnant type="text/babel" . Pour plus de clarté, vous pouvez vous référer ci-dessous au bac à sable

Nous sommes arrivés si loin de modifier impérativement le DOM via Javascript pour utiliser JSX. Contrairement à Javascript, nous ne nous soucions pas de la façon de créer des éléments tout en utilisant JSX. C'est le travail de Babel de les convertir dans l'API React, qui modifiera le DOM.

C'est ainsi que l'approche déclarative de React nous facilite la vie. Mais ce n'est pas encore fini, et il nous manque l'idée principale de React, c'est-à-dire la réutilisabilité. Créons un composant React réutilisable.

Création de composants React :

Comme nous savons que les fonctions nous facilitent la vie en partageant du code, nous pouvons également partager le code JSX en tant que fonctions, mais celles-ci sont appelées composants dans React.

Prenons un exemple.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Nous avons passé la fonction de message en tant que paramètre à React.createElement() au lieu d'un élément. lorsque nous passons une fonction en tant que paramètre à React.createElement(), le React Reconciler appellera cette fonction avec le paramètre que nous avons passé. Lorsque le réconciliateur rencontre un élément hôte, il laisse le moteur de rendu s'occuper de le monter.

Les composants hôtes sont des composants spécifiques à la plate-forme appartenant à l'environnement hôte (comme les navigateurs ou les appareils mobiles). Dans le cas d'un hôte DOM, il peut s'agir d'éléments HTML tels que div ou img .

Dans notre cas, deux appels de fonction se produiront, message ("Hello World !!") et message ("GoodBye World !!") , et les deux fonctions renverront :

<div className="msg"> Bonjour le monde !! </div>

<div className="msg">Au revoir le monde !! </div>

Tout comme l'utilisation de JSX pour rendre le code plus lisible que l'utilisation de l'API React brute, l'utilisation de JSX pour les composants personnalisés (fonctions Javascript) rend notre code plus propre et plus lisible. N'oubliez pas que c'est Babel qui est responsable de prendre notre JSX et de le transpiler dans l'API React, nous devons donc configurer Babel de manière à ce qu'il transmette la fonction par son nom plutôt que par une chaîne.

Pour utiliser un composant personnalisé comme balise JSX, nous devons mettre en majuscule le premier caractère du nom de la fonction afin que Babel le reconnaisse comme un composant personnalisé. Il ressemble à ceci :

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Hourra!! nous avons créé notre premier composant React

Conclusion:

C'est ainsi que React fonctionne dans les coulisses. N'oubliez pas qu'il ne s'agit que d'un article fondamental qui explique comment les choses fonctionnent sous le capot, et il existe de nombreux autres concepts comme l'État, le DOM virtuel, la réconciliation, etc. qui rendent React puissant et efficace.