Débutez avec React

Dans le chapitre précédent, vous avez initialisé une base de code complète. Vous avez pu réutiliser le composant que nous avions créé dans la première partie. C’est maintenant le moment d’ajouter un peu de style à nos composants. 💅

Stylisez votre app

Exploitez les classNames

Comme en HTML, nous pouvons associer des attributs à nos éléments. Les attributs HTML tels que id, href   pour un lien <a />,  src   pour une balise <img />, fonctionnent normalement en JSX.

En revanche, il existe des mots réservés en JavaScript, tels que  class.

Il suffit pour cela d'utiliser l'attribut  className  , et de lui préciser une string. D'ailleurs, vous pouvez utiliser plusieurs classes sur un élément en les mettant à la suite, séparées par un espace.

Créons dans  /src   un dossier  /styles   qui va regrouper nos fichiers CSS. On peut y glisser  index.css   en n'oubliant pas de modifier le path relatif pour importer  index.css   dans  index.js.

Je crée donc mon fichier  Banner.css   qui va me permettre de styliser mon composant. Ce qui nous donne une organisation comme dans la capture d'écran ci-dessous : 👇

Dans  Banner.js  , je wrappe mon  h1   dans une div à laquelle je précise la className  lmj-title   (“lmj” pour la maison jungle, bien sûr !) :

<div className='lmj-banner'>
    <h1>La maison jungle</h1>
</div>

Et retour dans notre fichier  Banner.css  , où on crée la classe correspondante :

.lmj-banner {
    color: black;
    text-align: right;
    padding: 32px;
    border-bottom: solid 3px black;
}

Jetons un œil à notre page dans le navigateur.

?!

Comment ça ? Rien ne se passe ?

Pas de panique, nous n’avons tout simplement pas importé le fichier.

Il suffit de rajouter dans notre fichier  Banner.js   :

import '../styles/Banner.css'

Et ça y est ! Notre style est appliqué !

Magnifique, n'est-ce pas 🤩 ?

Techniquement, vous pouvez. Mais il ne s'agit pas du tout d'une bonne pratique. En effet, en React comme dans toutes les librairies et tous les frameworks front, l'accessibilité du web est essentielle. Elle est nécessaire pour permettre aux technologies d’assistance aux personnes en situation de handicap, notamment, d’interpréter les pages web. Pour en savoir plus, je vous conseille “Concevez un contenu web accessible”, un excellent cours sur ce sujet.

Découvrez l'attribut style

Bonne nouvelle : les éléments React acceptent également l'attribut  style  pour styliser un composant. À la différence des éléments HTML, pour lesquels cet attribut est également accepté, il faut lui passer un objet en paramètre. On appelle cette méthode du inline style. Laissez-moi vous montrer à quoi ça ressemble dans la vidéo ci-dessous : 👇

Cet attribut peut être pratique pour tester rapidement quelque chose, mais il n'est pas recommandé d'en faire une utilisation plus poussée. Donc, pour styliser votre application, privilégiez davantage la méthode des classNames, ou d'autres méthodes avec des librairies tierces, par exemple.

Utilisez des images

Vous avez peut-être vu le  logo.svg   de React situé dans  /src   ?

Ici, nous allons faire un peu la même chose. Mais commençons par organiser tout ça.

Toujours dans  /src, on crée un dossier  /assets   dans lequel on vient mettre notre fichier  logo.png, que vous pouvez télécharger ici.

(D'ailleurs j'en profite pour créditer ici le designer Pixel Perfect.)

Vous devez d'abord le renommer pour bien avoir  logo.png.

Pour l’importer dans votre code, vous pouvez maintenant faire de la manière suivante. Dans  Banner.js  :

import logo from '../assets/logo.png'

Vous voyez ici, on déclare en fait une variable logo à laquelle on assigne le contenu de notre image.

Puis vous pouvez l'utiliser dans un élément img, ce qui nous donne pour notre  Banner.js  :

import logo from '../assets/logo.png'
import '../styles/Banner.css'

function Banner() {
    const title = 'La maison jungle'
    return (
        <div className='lmj-banner'>
            <img src={logo} alt='La maison jungle' className='lmj-logo' />
            <h1 className='lmj-title'>{title}</h1>
        </div>
    )
}

export default Banner

En ajoutant un peu de CSS (que vous pouvez aller chercher ici), me voilà avec la bannière telle que je la voulais, avec mon cart juste en dessous :

Vous avez maintenant une très bonne base de code pour créer votre application, en utilisant du style et des assets directement dans vos composants React. Félicitations à vous ! 🎉

Exercez-vous

Comme pour les chapitres précédents, vous trouverez la base de code sur la branche P2C2-Begin .

Ici, vous allez devoir styliser votre panier. Pour ça, créez d’abord une classe  lmj-cart. Votre panier doit avoir :

• un padding de 32 px ;

• du texte blanc ;

• et un background-color à #31b572.

Vous trouverez la solution de l’exercice sur la branche P2C2-Solution.

En résumé

• L'attribut className permet de préciser une classe à un élément React pour lui indiquer du CSS.

• Le fichier CSS correspondant peut être importé directement dans un fichier  .js.

• L'attribut  style   permet d'intégrer du style directement, on appelle cela du inline style.

• Les images sont importées par React grâce à Webpack. Il suffit d'importer l'image souhaitée.

Vous voilà maintenant avec les bases de votre application La maison jungle. Il est temps de peupler un peu cette application avec des données, et de contextualiser un peu ce qu'on fait. Ça tombe bien, c'est le programme du prochain chapitre ! 💪