Débutez avec React

Itérez sur votre contenu

En code, vous serez très souvent confronté à des listes de données qui présentent la même structure. Bonne nouvelle ! ✨ Pas besoin de vous faire des crampes à force de copier-coller : vous pouvez directement itérer sur votre contenu et générer des composants React dessus.

Découvrez votre allié :  map() 

La méthode JavaScript   map()  passe sur chaque élément d'un tableau. Elle lui applique une fonction, et renvoie un nouveau tableau contenant les résultats de cette fonction appliquée sur chaque élément.

Par exemple, pour une fonction qui doublerait la valeur d'un élément, cela donne :

const numbers = [1, 2, 3, 4]
const doubles = numbers.map(x => x * 2) // [2, 4, 6, 8]

Dans notre cas, elle va nous permettre de prendre une liste de données, et de la transformer en liste de composants.

On va donc créer un composant  ShoppingList.js   pour notre magasin de plantes.

Dans ce fichier, on déclare une variable plantList qui contient notre liste de plantes :

const plantList = [
    'monstera',
    'ficus lyrata',
    'pothos argenté',
    'yucca',
    'palmier'
]

Et on ajoute en dessous le composant lui-même :

function ShoppingList() {
    return (
        <ul>
            {plantList.map((plant) => (
                <li>{plant}</li>
            ))}
        </ul>
    )
}

export default ShoppingList

Vous voyez : pour chaque entrée du tableau, on retourne un élément  <li>  .

On importe ShoppingList.js dans  <App />   : super ! On a notre liste de composants ! 🎉

Mais qu'est-ce que c'est que cette erreur rouge dans ma console ?

Oh oh ! Il semblerait que j'aie oublié la prop  key   🙈.

Précisez votre key 

La documentation de React est claire sur ce sujet : les  key   (clés) aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau, afin d’apporter aux éléments une identité stable.

Pas du tout !
Si vous voulez éviter les bugs, une  key  doit impérativement respecter deux principes :

1. Elle doit être unique au sein du tableau. 

2. Et stable dans le temps (pour la même donnée source, on aura toujours la même valeur de key=).

Souvenez-vous, je vous avais parlé du DOM virtuel dans la partie précédente. Eh bien, la  key   permet d'associer une donnée au composant correspondant dans le DOM virtuel qui permettra ensuite de générer les composants. 

Nous avons plusieurs méthodes pour générer une  key   unique :

• La méthode la plus simple et la plus fiable consiste à utiliser l'id associée à votre donnée dans votre base de données.

• Vous pouvez également trouver un moyen d'exploiter la valeur de la donnée, si vous avez la certitude qu'elle sera toujours unique, et stable dans le temps.

• En dernier recours, vous pouvez définir une string et la combiner avec l'index de la data dans votre tableau.

Dans notre cas, puisqu'il n'y a pas d'id associée, on peut faire une combinaison entre l'index et le nom de la plante qui est une string :

function ShoppingList() {
    return (
        <ul>
            {plantList.map((plant, index) => (
                <li key={`${plant}-${index}`}>{ plant }</li>
            ))}
        </ul>
    )
}

export default ShoppingList

Cette fois-ci, pas d’erreur dans la console !

Exercez-vous

Sur la branche P2C3-Begin-1 , vous trouverez la base de code nécessaire pour commencer l'exercice. Vous verrez dans  ShoppingList.js   une liste de plantes importée depuis  /datas   qui s'appelle  plantList, et qui comporte des catégories pour chacune des plantes.

À partir de cette liste de plantes, vous devrez :

• Constituer une nouvelle liste de manière dynamique qui extrait les catégories uniques de plantes (que nous utiliserons également plus tard). 

  Il existe plusieurs solutions pour créer une liste d'éléments uniques, mais je vous conseille de vous pencher sur la méthode reduce()  ou bienforEach().

• Afficher la liste des catégories de plantes au-dessus de la liste des plantes à vendre.

Dans la même logique, la solution se trouve sur la branche P2C3-Solution-1. 

Contextualisez le contenu de vos composants

React nous permet de faire des listes de composants : un gain de temps énorme dans votre vie de développeur. Mais ce n'est pas tout ! Le JSX nous permet également d'afficher des éléments de manière conditionnelle dans nos composants.

Eh bien, nous allons pousser cette logique plus loin pour changer certaines parties de notre composant selon le contexte.

Créez des conditions dans le JSX

Donc… Nous avons déjà vu le ternaire. Maintenant qu'on a une app complète pour nous faire la main, moi, ça me donne envie de le mettre en application dans notre site de plantes. 🤓

Dans notre liste de plantes  plantList.js, je vais rajouter une catégorie  isBestSale   correspondant à un  booléen   qui nous indique si notre plante fait partie des meilleures ventes. Ce qui nous donne pour le premier élément :

{
    name: 'monstera',
    category: 'classique',
    id: '1ed',
    isBestSale: true
},

Maintenant que nous avons notre booléen, nous allons utiliser un ternaire pour afficher un emoji en fonction. Dans  ShoppingList.js, au niveau de l'affichage du nom, je rajoute :

{plantList.map((plant) => (
    <li key={ plant.id }>
        {plant.isBestSale ? <span>🔥</span> : <span>👎</span>}
    </li>
))}

Ce qui nous donne :

Génial ! Ça marche bien !

Mais en y repensant, je ne suis pas sûre que ce soit top comme argument de vente... 🤔 À la place, n'affichons que le 🔥 pour les meilleures ventes, et rien pour les autres.

Pour ça, on peut retourner  null   dans la condition où on ne veut rien afficher :

{plant.isBestSale ? <span>🔥</span> : null}

Et voilà ! On a ce qu’on voulait ! 🙌
Mais vous savez quoi ? Il existe une manière encore plus simple d'écrire ça : vous pouvez utiliser  &&.

Indiquée entre accolades,  &&   précède un élément JSX et précise que l'élément ne sera généré que si la condition est respectée. On peut donc écrire :

{plant.isBestSale && <span>🔥</span>}

Yeeees ! Ça fonctionne comme prévu !

Ouvrez-vous à d'autres méthodes

React est particulièrement flexible : il existe d'autres méthodes permettant de contextualiser votre contenu. Je vais vous en montrer quelques-unes dans le screencast ci-dessous :

Exercez-vous

Comme pour le premier exercice, vous trouverez la base de code sur la branche P2C3-Begin-2. J'en ai profité pour rajouter un peu de CSS dans  ShoppingList.css, afin qu'on y voie un peu plus clair. ✨

J'ai également ajouté une variable  isSpecialOffer   à  true   pour les plantes qui sont en promotion. Votre mission est d'afficher un élément  div  qui contient le mot “Soldes” si la plante est en promotion. Vous pouvez lui passer la classe  lmj-sales  pour lui ajouter du style.

Vous êtes libre de choisir l’une des méthodes vues dans le chapitre pour créer votre affichage conditionnel.

Et la solution se trouve sur la branche P2C3-Solution-2.

En résumé

• À partir d’une liste de données,  map()   permet de créer une liste de composants React.

• La prop  key   est indispensable dans les listes de composants.

• Si vous voulez éviter les bugs, la prop  key   doit : 

  • être unique au sein de la liste ;

  • perdurer dans le temps.

• La best practice pour créer une  key   est d’utiliser l’ id   unique associée à une donnée, et de ne pas vous contenter d'utiliser l'index de l'élément dans la liste.

• Une condition ternaire permet d’afficher un élément ou un autre dans le JSX, répondant à la condition "if… else...".

• Il existe d'autres manières de créer des conditions en React, notamment en sortant les conditions du JSX.

Dans ce chapitre, vous avez appris à maîtriser deux principes extrêmement utiles pour gagner en temps et en rapidité sur React, avec les conditions et les listes ! Félicitations à vous ! 🎉

Dans le prochain chapitre, nous allons aborder un élément essentiel pour la réutilisation des composants en React : les props !
Alors, hâte de vous atteler aux  props   ? Rendez-vous dans le prochain chapitre ! 🔥