Écrivez du code modulaire avec les composants en JSX

Dans le chapitre précédent, vous avez appris à créer votre premier composant avec Vite, et à l'utiliser dans votre application React. Déjà, bravo ! 

Il est maintenant temps de nous pencher un peu plus sur les composants et de découvrir la puissance du JSX.

Pensez en composants

Bon, ça ne fait que deux chapitres, et vous avez déjà entendu 20 fois le mot "composant" (si si, j'ai compté). Vous l'aurez compris : les composants sont essentiels dans React.

Si je prends l'exemple de notre projet "La maison jungle", vous voyez qu'on peut identifier plusieurs parties :

• la bannière avec le titre,

• la liste des plantes,

• le panier,

• chaque carte de plante avec son nom, sa photo et son prix,

• etc :

Les composants permettent d'utiliser la même structure de données, et de remplir ces structures avec différents jeux de données. Peu importe le nombre de plantes que vous aurez à mettre dans La maison jungle, vous pourrez les exploiter pour afficher vos données sans aucun effort.

Et si dans le futur, vous avez besoin de créer une nouvelle page avec la même présentation, vous pourrez réutiliser le même composant : vous vous rendez compte de la puissance des composants ?

Découvrez le JSX en action

Voyons directement le JSX à l'œuvre avec notre projet "La maison jungle" !

Voici comment nous pourrions créer nos premiers composants :

// Composant pour l'en-tête de notre boutique
const Header = () => {
  return <h1>🌿 La maison jungle</h1>
}

// Composant pour la description
const Description = () => {
  return <p>Ici achetez toutes les plantes dont vous avez toujours rêvé 🌱</p>
}

Et voici comment nous les utilisons dans notre application :

import { createRoot } from 'react-dom/client'

const App = () => {
  return (
    <div>
      <Header />
      <Description />
    </div>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)

Vous remarquez quelque chose d'étonnant ? Ce code ressemble à du HTML, mais c'est du JavaScript ! C'est ça, la magie du JSX.

Initiez-vous au JSX

Lorsqu'on écrit :

const Header = () => {
  return <h1>🌿 La maison jungle</h1>
}

 ...et qu'on le réutilise avec  <Header />, on pourrait croire qu'il s'agit de HTML. Ça a un peu la même tête, mais il s'agit de JSX !

JSX est la manière la plus compréhensible d'écrire des composants React dans une application, et donc la manière qui est quasiment toujours utilisée.

En arrière-plan, React transforme notre JSX en instructions que le navigateur peut comprendre, mais nous n'avons pas besoin de nous en préoccuper !

Composez vos composants

Reprenons nos composants  <Header />  et  <Description />; ils sont un peu seuls, vous ne trouvez pas ?

Essayons de les afficher ensemble dans StackBlitz :

import { createRoot } from 'react-dom/client'


// code de nos composants ici 
……
//reprise de notre code principal
const root = createRoot(document.getElementById('root'))
root.render(<Header /><Description />)

On peut donc faire :

root.render(
  <div>
    <Header />
    <Description />
  </div>
)

et le problème est résolu.

Créez des composants plus complexes

Comme je vous l'ai expliqué, le propre de React est de nous encourager à réutiliser nos composants. On va donc structurer notre interface en arborescences de composants.

Regroupons notre  Header  et notre  Description  dans une bannière :

const Banner = () => {
  return (
    <div>
      <Header />
      <Description />
    </div>
  )
}

Vous voyez ? Tout se passe bien comme prévu.

Et nous pourrions également les encapsuler, et les utiliser autant de fois que nous le souhaitons :

<div>
    <Banner />
    <Banner />
    <Banner />
</div>

Pour ça, vous pouvez utiliser  < >  et  </>:

<>
  <Header />
  <Description />
</>

Manipulez des données dans vos composants JSX

En React, les accolades  {  et  }  sont particulièrement utiles.

Ça nous permet d'appliquer des expressions JavaScript directement dans notre JSX pour :

1. afficher des variables

2. faire des calculs

Affichez des variables

// pour une string
const title = "La maison jungle"
<div>{title}</div>

// pour un nombre
const price = 15
<div>{price}€</div>

Faites des calculs

<div>Total : {8 + 10 + 15}€</div>

Transformer des données

const shopName = "la maison jungle"
<h1>{shopName.toUpperCase()}</h1>

Utiliser des conditions

const isOpen = true
<div>{isOpen ? 'Boutique ouverte' : 'Boutique fermée'}</div>

Exemple pratique avec notre projet

Améliorons notre composant  Description  en y ajoutant des données dynamiques :

const Description = () => {
    const slogan = "Ici achetez toutes les plantes dont vous avez toujours rêvé"
    const plantCount = 12
    const isNewCollection = true

    return (
        <div>
            <p>{slogan} 🌱</p>
            <p>Plus de {plantCount} variétés disponibles</p>
            {isNewCollection && <p>✨ Nouvelle collection printemps !</p>}
        </div>
    )
}

Vous voyez ? Nous pouvons maintenant créer des composants vraiment dynamiques pour notre boutique de plantes !

À vous de jouer !

Vous avez appris plein de choses dans ce chapitre, bravo ! C'est maintenant l'occasion de les mettre en pratique.

Objectif : Créer les premiers composants de "La maison jungle"

Voilà ce qui est attendu de vous :

1. Réutiliser le composant Banner de ce chapitre qui présente le nom de notre boutique. Vous devez sortir le titre dans une variable JavaScript : le titre doit initialement être en minuscules et être transformé en majuscules avec du JavaScript.

2. Créer un composant <Cart />(panier) qui viendra sous notre bannière.

3. Le panier contient 3 plantes : un monstera, un lierre et un bouquet de fleurs.

4. Créer 3 variables pour les prix des plantes : le monstera coûte 8€, le lierre coûte 10€, et le bouquet de fleurs coûte 15€.

5. Le panier contient une liste (<ul>), et chaque élément présente le nom de l'article et le prix.

6. Le total du panier additionne les trois prix et s'affiche en bas.

Résultat attendu :

En résumé

• Une interface utilisateur (ou UI) est constituée de multiples composants React qui :

  • sont réutilisables ; par exemple, un bouton, un élément dans une liste, un titre,

  • regroupent la structure, les styles et le comportement d'un élément,

  • sont composés en combinant d'autres composants plus simples.

• Le JSX est une syntaxe créée par React permettant d'écrire du JavaScript qui ressemble à du HTML. Il faut suivre quelques règles :

  • deux composants doivent toujours être wrappés dans un seul composant parent,

  • les noms des composants commencent par une majuscule,

  • toutes les balises doivent être fermées.

• Les accolades{}permettent d'insérer des expressions JavaScript dans le JSX pour créer des interfaces dynamiques

Vous voilà maintenant prêt pour le quiz de la première partie ! Je compte sur vous pour tout donner. Dans le prochain chapitre, nous découvrirons comment organiser nos composants dans des fichiers séparés avec Vite, et comment construire une vraie structure d'application React moderne !