Retour • 06/07/2022

Apprendre React en partant de 0 !

Écris par Melvyn Malherbe le 06/07/2022

J'en vois beaucoup qui galèrent avec React… Car ils font une app avant de comprendre la base.

Comment fonctionne React ?

Pour réussir à répondre à cette question, je te propose de faire du React en partant de rien. Un fichier HTML, c'est tout.

Cet article te permettera d'expérimenter et de comprendre React. Mais si tu es plus visuel, tu peux aussi aller voir ma vidéo YouTube :

C'est quoi React ?

Donc React c'est une library JavaScript où tout est JavaScript ! C'est possible de faire du React super facilement sans même Next / CRA etc...

On a l'impression que pour l'utiliser c'est lourd, mais avec 26 lignes de code l'app, on a une app React qui fonctionne. Alors une "app" est un bien grand mot, mais React fonctionne avec juste 26 lignes de code.

Analyse de l'app "minimum"

Qu'est-ce qu'il y a dans cette app ?

Une div #root qui est la div dans laquelle React va afficher le rendu. Ensuite, avec les CDN de React on ajoute React et ReactDOM ! Dans un script, on récupère le RootElement avec du JS basique (querySelector quoi).

const rootElement = document.getElementById('root');

Ensuite, on crée un élément React. Le premier argument définit le type de notre composant React si c'est une div, un header ou autre. Le deuxième équivaut aux props qu'on lui donne.

Comme c'est une div, on peut lui donner toutes les props basiques comme style, class ou id ! Puis tous les arguments après seront les enfants 👶 Pour les enfants, on crée deux éléments span sans props et avec comme enfants du texte.

const reactElement = React.createElement(
  'div', // définit le type
  { style: { background: 'red' } }, // props
  React.createElement('span', null, ' Hello'), // enfants
  React.createElement('span', null, ' Word !')
);

Le code fait ci-dessus va se traduire en HTML comme ceci :

<div style="background: red">
  <span>Hello</span>
  <span>Word !</span>
</div>

Le JSX

Tu vois que le code précédent est quand même pas super cool à lire. Donc React a dû trouver une solution pour écrire du React comme du HTML ! C'est là que le JSX est né !

Voici le code JavaScript précédent fait cette fois avec JSX.

(Ici j'utilise un syntaxe étrange, reactElement n'est pas un composant il permet juste de te montrer que le JSX n'a aucun rapport avec les "composants").

C'est plus beau non ? 😎 (j'ai supprimé et simplifié ce qu'on a vue précédemment !)

Quelques nouveautés ici. Il y a un script pour importer babel !

Le type du fichier est maintenant type="text/babel" pour que babel sache qu'il doit parser ce qu'il y a dedans.

La magie du JavaScript avec JSX

Ici, notre code, c'est du JavaScript ! Mais quand tu fais <div>salut</div> le "salut" n'est pas du JavaScript mais du JSX !

Quand on fait du JSX, on n'est plus dans un context JavaScript. Pour retourner dans ce context JavaScript il faut utiliser des {...}. Tout ce qui est entre { et } c'est du JavaScript.

Dans le code précédent, { { background: "red" } } les premières acolades vont te faire être dans du JavaScript et les deuxièmes permettent de définir un objet.

Tu as accès au dom, Windows, document etc... Je peux, par exemple, faire un Math.random au milieu de mon code !

Donc maintenant je vais créer un petit composant button. Celui-ci va pouvoir être appelé partout exactement comme un élément HTML. Il est représenté par une fonction et les paramètres qui lui sont donnés.

Utiliser le compiler babel

Tu te rappelles du code avec uniquement du javascript sans jsx ? Et bah on peut le retrouver en utilisant le repl de babel

Ici, on voit exactement ce qui se passe ! Babel va appeler React.createElement avec notre élément !

Ici, ce que tu peux remarquer aussi, c'est que mon button a 2 paramètres :

• bgColor
• title

Que je peux ensuite définir dans le composant qui l'utilise !

La props "children"

Quand tu écris button tu fais : <button>text</button>. Le children c'est l'élément "text". Mais quand je fais <BigButton title="text" /> il n'y a aucun children !

C'est pas très élégant. Mais en JSX tout ce qui est donné entre les balises se nomme "children". Donc, je remplacerai la props title par children pour utiliser mon button comme ceci :

const BigButton = ({ children }) => {
  return <button>{children}</button>;
};

// use like this
<BigButton>text</BigButton>;

En fait, il n'y a aucune magie noire, tout est compréhensible ! J'espère que pour toi aussi maintenant.

Mais, j'ai préparé un tutoriel avec beaucoup plus d'infos dans une vidéo YouTube:

👉 la vidéo 👈

Hésite pas à me faire un feedback ici ou sur YouTube ❤️