DEV Community: Ahmed Bouras

Comprendre React Context en faisant un Dark mode

Ahmed Bouras — Sat, 01 Apr 2023 13:58:48 +0000

Dans ce tutoriel nous allons voir ensemble ce qu'est React Context et finir cette explication par un petit dark mode pour la mise en pratique.

Déjà, c'est quoi React Context ?

React Context (ou l'API de Context pour les plus intimes) va nous permettre de rendre disponible des données et/ou des fonctions, dans toute notre application.

Sans React Context, il est possible de le faire en passant par les props d'un parent à son enfant. Cependant, imaginez que vous ayez une architecture où vous avez un parent, qui à un enfant, qui à lui même un enfant, qui à lui même un enfant, etc.
Il serait fastidieux de mettre cela en place.

On appelle ça le prop drilling.

Context existe donc pour éviter le prop drilling.
Pour faire une métaphore, imaginez une famille dans une maison où l'on a le père, le fils, le petit-fils et l'arrière petit-fils.

Avec le prop drilling :
Le père souhaite donner les clés de la voiture familial à son arrière petit-fils. Pour cela, il doit donner les clés à son fils, qui va devoir les donner à son petit-fils, qui les donnera enfin à son arrière petit-fils.

Avec Context :
Le père pose les clés de la voiture dans le salon et celui qui à besoin des clés n'aura qu'a les récupérer. Les clés sont disponible pour tout le monde, sans passer par un intermédiaire.
Mais n'oublions pas les bonnes manières… Il faudra les demander, avant de les prendre 😉

Maintenant que nous avons vu la théorie, faisons un peu de pratique avec notre dark mode.

Il y aura 3 étapes principales :

Créer le context
Englober notre app dans le context créé
Récupérer les données/fonctions de notre context

Juste pour le côté pratique, je vais tout mettre dans le dossier src, et configurer le css dans un seul endroit. Ne gardez que les fichiers suivants : index.js | index.css | App.js



/* index.css */

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.dark-theme {
  background-color: #1B2430;
  color: #F1F1F1;
}
.content {
  width: 80%;
}

Créons un peu de contenu pour nous permettre de voir le changement qui va s'opérer avec le dark mode ainsi que le bouton qui vas nous permettre de switcher avec ce mode.



// ToggleButton.js
export default function ToggleButton() {
  return <button>Toggle</button>
}



// Content.js
import ToggleButton from "./ToggleButton";

export default function Content() {
  return (
    <div className="content">
      <h1>Hello world!</h1>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
         Voluptates id ratione voluptatibus iusto unde soluta 
         dicta cum nam, rerum sit labore at et ducimus nobis 
         expedita molestiae commodi nostrum eius voluptatem 
         reiciendis repellat accusamus placeat eveniet rem. 
         Consequuntur, ducimus dolorum. Sunt deserunt optio itaque 
         maxime eligendi temporibus magnam pariatur inventore.</p>
         <ToggleButton />
    </div>
  )
}



// App.js
import Content from "./Content";

export default function App() {
  return (
    <div className="app">
      <Content />
    </div>
  )
}

Maintenant que nous avons notre base, passons à ce qui nous intéresse vraiment et créons le fichier qui va fournir notre context : DarkModeProvider.js.

1. Créer le context

Pour créer un context, rien de plus simple, il suffit d'utiliser la commande suivante :
export const DarkModeContext = createContext();

🔴 Attention ! Cette commande doit se trouver en dehors de vos composants. Notre fichier ressemble maintenant à cela pour le moment :



// DarkModeProvider.js
import { createContext } from "react"

export const DarkModeContext = createContext();

// début du composant
export default function DarkModeProvider() {
  return (
    <div>

    </div>
  )
}
// fin du composant

Pour la suite, nous allons créer une variable darkMode qui aura pour valeur true ou false afin de savoir si le dark mode est activé. À cela, nous allons ajouter une fonction qui nous permettra permettra de switcher entre ces deux valeurs.

Ça tombe bien, il y a un Hook que nous allons utiliser pour cette tâche et c'est useState.



import { createContext, useState } from "react"

export const DarkModeContext = createContext();

export default function DarkModeProvider() {
  const [darkMode, setDarkMode] = useState(false);

  function toggleDarkMode() {
    setDarkMode(!darkMode);
  }

  return (
    <div>

    </div>
  )
}

On initialise darkMode à false car initialement notre site sera en clair (couleur par défaut) :
false -> clair
true -> sombre

Puis la fonction toggleDarkMode() permettra à chaque clique sur notre bouton, d'inverser les couleurs, c'est à dire de faire passer false à sa valeur inverse : true et ainsi de suite.

D'ailleurs, comment je fais pour transmettre cette fonction à mon bouton ToggleButton ?

2. Englober notre app dans le context créé

Il y a deux étapes pour "englober" notre app de notre context. On peut dire aussi que l'on fournis un context à notre app.

La première est d'englober notre composant App par le composant DarkModeProvider :



// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import DarkModeProvider from "./DarkModeProvider";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DarkModeProvider>
      <App />
    </DarkModeProvider>
  </React.StrictMode>
);



// DarkModeProvider.js
import { createContext, useState } from "react"

export const DarkModeContext = createContext();

export default function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);

  function toggleDarkMode() {
    setDarkMode(!darkMode);
  }

  return (
    <DarkModeContext.Provider>
      {children}
    </DarkModeContext.Provider>
  )
}

Ici, children correspond à notre composant App.

Autre petite étape avant de passer à la suite. On a rendu notre context disponible, c'est bien... Mais comment Context sait qu'il doit mettre telle ou telle donnée à disposition ?

Il faut les ajouter en tant que valeur comme ceci :



// DarkModeProvider.js
  return (
    <DarkModeContext.Provider 
    value={ {darkMode, toggleDarkMode} }>
      {children}
    </DarkModeContext.Provider>
  )
}

On ajoute donc un objet avec ce que l'on souhaite rendre disponible.

3. Récupérer les données/fonctions de notre context

Est-ce que vous vous rappelez de ce que je vous ai dit plus haut ? Lorsque l'on souhaite obtenir quelque chose, on le demande gentiment. Ça fait partie des bonnes manières.

Pour obtenir ce que l'on souhaite, nous allons utiliser le Hook useContext. Il va nous permettre d'utiliser ce que Context à rendu disponible.

Avec cette ligne et grâce au destructuring, nous nous permettons de récupérer notre donnée et notre fonction renduent disponible par notre Context :
const {darkMode, toggleDarkMode} = useContext(DarkModeContext);

Maintenant que nous avons accès à notre fonction, nous allons l'ajouter et l'exécuter lorsque le bouton sera cliqué et pour vous montrer que cela fonctionne, nous allons loguer la valeur de darkMode.

Votre code devrait ressembler à ceci :



import { useContext } from "react"
import { DarkModeContext } from "./DarkModeProvider"

export default function ToggleButton() {
  const {darkMode, toggleDarkMode} = useContext(DarkModeContext);
  console.log(darkMode);
  return <button onClick={toggleDarkMode}>Toggle</button>
}

Maintenant, ouvrez la console et cliquez sur sur le bouton et vous verrez la valeur de darkMode passer de false à true et ainsi de suite.

Super ! On a terminé toutes les étapes pour apprendre à utiliser les propriétés transmises par Context.

De ce fait, voici le code qui nous permet d'ajouter la classe dark-theme pour notre app :



import { useContext } from "react";
import Content from "./Content";
import { DarkModeContext } from "./DarkModeProvider";

export default function App() {
  const {darkMode} = useContext(DarkModeContext);
  return (
    <div className={`app ${darkMode && 'dark-theme'}`}>
        <Content />
    </div>
  )
}

On récupère la valeur de darkMode et si elle est true, alors la classe sera ajouté.

Conclusion

Context nous permets de rendre disponible nos données/fonctions beaucoup plus facilement. On utilise Context généralement pour des actions occasionnels (changement de thème, changement de la langue du site, …).

Je vous invite maintenant à lire la documentation officielle de React sur Context et useContext pour parfaire vos connaissances et réaliser les exemples qu'ils proposent.

Sayonara !

Flexbox | flex-grow : la méthode de calcul (FR)

Ahmed Bouras — Sat, 11 Jun 2022 16:58:58 +0000

La propriété flex-grow va vous permettre d'agrandir ou d'élargir vos items dans votre container en leur attribuant l'espace restant grâce à la méthode de calcul suivante :

espace restant / total des parts demandés par les items

Pour comprendre cette méthode de calcul, voyons ensemble avec le code ci-dessous :

<div class="container">
    <div class="items item1"></div>
    <div class="items item2"></div>
    <div class="items item3"></div>
</div>

*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: flex;
    height: 200px;
    width: 600px;
    background-color: crimson;
}
.items {
    height: 100px;
    width: 100px;
    background-color: aqua;
    border: 1px solid black;
}

Vos éléments devraient ressembler à ça :

Comme vous pouvez le constater, les items ne prennent pas toute la largeur du container.
C'est normal, car ils ont une largeur de 100px chacun (un total de 300px pour les 3) pour un container large de 600px.

Nous allons utiliser flex-grow pour faire en sorte que les items s'élargissent afin de compléter l'espace restant.

Par défaut, nos items ont la propriété flex-grow qui vaut 0.
Modifions cette valeur à 1 pour les trois items.

.item1 {
    flex-grow: 1;   /* default ->  flex-grow: 0; */
}
.item2 {
    flex-grow: 1;
}
.item3 {
    flex-grow: 1;
}

TADAAAAAM !!! Les items se partagent équitablement l'espace pour remplir le container.

🙋 Mais que s'est-il réellement passé ?

Nos 3 items prenaient 300px de large sur les 600px du container. Il restait donc 300px de libre.

Avec flex-grow, nous avons demandé à ce que chacun de nos items obtient une part de l'espace restant donc :

1 part pour item1
1 part pour item2
1 part pour item3
Ce qui fait un total de 3 parts.

Utilisons notre méthode de calcul :

Espace restant = 300
Total des parts demandés par les items = 3

300 / 3 = 100.

⚠️ Le résultat que l'on obtient équivaut à une seule part.

Comme chaque item à demander une seule part, alors chaque item se verra attribué 100px de largeur en plus.

🙋 Et si je souhaite qu'un item possède une part de plus que les autres ?

C'est également possible. Il suffit de donner la valeur 2 (comme 2 parts) à l'item de notre choix. Exemple :

.item1 {
    flex-grow: 1;
}
.item2 {
    flex-grow: 2;
}
.item3 {
    flex-grow: 1;
}

C'est qu'il est gourmand notre 2e item... 😁

Revenons à notre méthode de calcul pour comprendre ce qu'il s'est passé.

1 part pour item1
2 parts pour item2
1 part pout item3
Ce qui fait un total de 4 parts.

Espace restant = 300
Total des parts demandés par les items = 4

300 / 4 = 75.

item1 : 100 + 75
item2 : 100 + 75 x 2 (car il a demandé 2 parts)
item3 : 100 + 75

item1 vaut 175px de large.
item2 vaut 250px de large.
item3 vaut 175px de large.

Je vous invite bien évidemment à utiliser l'inspecteur d'élément de votre navigateur pour avoir un visuel de l'extension de nos items comme ci-dessous :

J'espère que vous avez compris le concept de cette méthode de calcul.
N'hésitez pas à vous amuser avec différentes valeurs pour flex-grow, devinez la taille de vos éléments et enfin, vérifiez via l'inspecteur d'élément le résultat de vos calculs.

Cette méthode reste la même si vous utilisez flex-direction: column avec un container plus grand.
Les items se partageront alors la hauteur. 😉

My first contribution

Ahmed Bouras — Sat, 02 Apr 2022 17:39:35 +0000

I am so happy to announce you that I made my first contribution ! 🎉

It's not a bug that I fixed but, I'm proud to have particpated to my first opensource project (even if it was for the documentation).

My Pull Request : https://github.com/symfony/symfony-docs/pull/16596

And you, what did you feel when you contributed for the first time ?

GIT - Corriger une erreur dans un fichier commité (FR)

Ahmed Bouras — Mon, 22 Nov 2021 10:36:45 +0000

Vous venez de commiter un ou plusieurs fichiers mais vous vous êtes rendu compte d'une erreur ou d'un oubli ?

Keep calm and git commit --amend

En effet, cette commande permet à la fois de modifier votre dernier message commité, mais aussi de rattraper une erreur dans le contenu de votre dernier commit. 😍

Imaginons qu'on vous demande de créer un fichier hello.php pour dire bonjour :

echo 'Hello';

Vous faites un git add hello.php puis un git commit -m "hello.php say Hello". Jusque là tout vas bien.

Sauf qu'on vous a demandé de dire bonjour… Au monde entier…
Zut vous avez mal entendu. 😅

Alors plutôt que de modifier le fichier et de créer un autre commit du genre git commit -m "World! added to index.php because I forgot it" 😒, voici la marche à suivre :

Modifiez votre fichier
Faite un git add du/des fichier(s) modifié(s)
Faite un git commit --amend
Modifiez (ou non) le message de votre dernier commit

Pour ne pas modifier le message de votre commit, vous pouvez effectuer la commande git commit --amend --no-edit au niveau de l'étape 3

Et voilà ! Ni vu ni connu ! Votre erreur est passée inaperçue…

Enfin presque… Le SHA de votre commit sera modifié. Il est recommandé, d'après la documentation, de ne pas effectuer cette opération si votre commit a déjà été push sur votre dépôt distant.

align-items vs align-content (FR)

Ahmed Bouras — Sun, 14 Nov 2021 18:18:06 +0000

Tout d'abord, il est important de poser les bases et de comprendre le système des axes avec Flexbox.

Pour faire simple, les exemples ci-dessous seront basés sur le fait que notre conteneur utilise la valeur par défaut de flex-direction : flex-direction: row;

Dans ce cas, notre main-axis (axe principal), en rouge, représentera notre axe horizontal et cross-axis (axe transversal), en noir, représentera notre axe vertical.
C'est sur ce dernier axe que nos propriétés align-items et align-content prendront effet.

Sachez que si notre conteneur était configuré sur flex-direction: column, alors les axes seraient inversés :
L'axe principal deviendrait l'axe vertical, tandis que l'axe transversal deviendrait l'axe horizontal... Le monde à l'envers

Enfin bref, attaquons nous à ces align-blablabla

Par défaut, un conteneur qui a la propriété display: flex; fera en sorte de mettre tous ses items sur une seule et même ligne, et ce, peu importe la largeur de ses items, en les compressant.
Je n'ai pas mis le mot "ligne" en gras pour rien, il nous aidera à comprendre la suite.

Ici, les items 1 à 10 font partie de la même ligne.

Alors que si j'utilise la propriété flex-wrap: wrap;, les items s'étendront à leurs largeurs respectives et s'il n'y a plus de place sur la ligne, alors une autre ligne sera créée pour ces items.



.container {
  display: flex;
  flex-wrap: wrap;
}

Ici, nous avons deux lignes :
La première aves les items de 1 à 6 et la deuxième aves les items de 7 à 10.

Pour info, une ligne aura pour hauteur celle de son item le plus grand. Je les ai identifiées à l'aide d'un encadré rouge.

Dans le cas où votre conteneur dispose seulement d'une seule ligne d'items, alors la propriété align-content n'aura aucun effet sur celle-ci.
Effectivement, cette propriété est à utiliser lorsque votre conteneur possède plusieurs lignes d'items.

En revanche, notre propriété align-items peut déjà nous être utile pour aligner/positionner nos items sur l'axe transversal.
Je vous laisse tester les différentes valeurs que vous retrouverez ici. 😉

Vous remarquerez alors que cette propriété nous permet à la fois de positionner les items par rapport à leur ligne mais aussi par rapport à leur conteneur.

Exemple :



.container {
  display: flex;
  align-items: center;
}

Ceci aura pour effet de centrer la ligne (sur l'axe transversal) par rapport à son conteneur mais aussi de centrer les items (sur l'axe transversal) par rapport à leur ligne.

🙋
"Et du coup, quand on a plusieurs lignes, à quoi nous sert align-content ?"

Cette propriété vas nous permettre de gérer la disposition de nos lignes par rapport au conteneur mais n'aura aucun impact sur la disposition des items dans leurs lignes.

💁
"Mais ça ne sert à rien puisque align-items fait les deux en une seule fois…"

Ok… Ok… Nous allons passer sur un exemple avec plusieurs lignes pour comprendre la différence entre ces deux propriétés.

Premier cas avec align-items:



.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
```

![items centrés par rapport à leurs lignes mais pas complètement centrés par rapport au conteneur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dw5htr6yzawyhi99440.JPG)

Les items sont centrés par rapport à leurs lignes respectives (sur l'axe transversal) et les lignes se sont quelques peu centrées par rapport à leur conteneur tout en étant espacées…

Deuxième cas avec `align-content` :


````css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
```



![lignes centrés par rapport au conteneur sans espace entre elles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx9dxeraslva34oi37f5.JPG)

Aucun effet sur les items par rapport à leurs lignes respectives. Par contre, **les lignes sont complètement centrées** par rapport à leur conteneur via l'axe transversal, et ce, sans espace !

Vous comprenez mieux maintenant ?

Je ne vais pas rentrer dans les détails concernant les espaces qu'ajoute la propriété `align-items` entre les lignes, mais ce qui est important, c'est de différencier le but principal de ces propriétés lorsque l'on possède plusieurs lignes d'items :

* `align-items` **permet d'aligner les items par rapport à leurs lignes**.
* `align-content` **permet d'aligner les lignes par rapport à leur conteneur**. *Les lignes sont le contenu de notre conteneur.* :wink:

De par leurs noms, les propriétés nous donnaient déjà de gros indices sur leurs fonctionnements.
Un joli moyen mnémotechnique pour ne plus les confondre. :grin: