Intégration de la maquette

Dans ce chapitre, nous allons intégrer très simplement une maquette HTML/CSS directement dans React.JS.
Ce sera l'occasion de voir comment fonctionnent les images avec React.JS et d'intégrer une bibliothèque CSS : Fontawesome.

Intégration de la maquette

💡 Vous trouverez les fichiers de la maquette sur le compte Github de Formacitron à l'adresse suivante : https://github.com/Formacitron/formation-decouverte-react.js-maquette

Récupérez le code HTML issu de la maquette et remplacez le code JSX du composant "App" (fichier src/App.js).

Cela va poser plusieurs problèmes :

1. un composant React.JS ne peut retourner qu'une seule balise. Or, ici nous en avons 3 (header, main et footer).
2. les balises d'un composant doivent toujours être fermées et ça n'est pas toujours le cas ici
3. l'attribut "class" des balises HTML ne peut pas être utilisé.

1. Groupez les balises

React propose un composant "Fragment" qui permet de grouper plusieurs balises en une seule. Importez donc cet élément (import { Fragment } from 'react') et encadrez le JSX de notre composant App avec une balise <Fragment></Fragment> pour résoudre le premier problème.

2. Fermez toutes les balises

Les balises qui ne fonctionnent pas en couple (ouvrante/fermante) doivent être terminées par un "/".
C'est le cas de nos balises <img> et <input> qui devront être fermées ainsi :

<img src="./logo.svg" alt="" />
<input type="text" />

3. Remplacez l'attribut "class" par "className"

Remplacez tous les attributs HTML "class" par "className" comme sur cet exemple : <i className="fas fa-tasks"></i>

Ajouter le CSS

Si vous regardez en haut de notre fichier "App.js", vous verrez qu'un fichier "App.css" y est importé : import './App.css';

C'est comme cela qu'on charge du CSS avec React.JS !

Récupérez le code CSS de la maquette et remplacez le contenu du fichier "App.css"

Comme notre composant sera injecté dans la balise <div id="root"></div> du fichier "index.html", nous sommes dans un contexte légèrement différent. Remplacez donc la règle CSS body { par #root {.

Votre application devrait commencer à ressembler à notre maquette, mais il reste encore quelques détails à régler.

Charger une image avec React.JS

Récupérez les images "react.svg" et "logo.svg" dans les fichiers de la maquette et ajoutez-les dans le répertoire "src" de notre application (il existe déjà un fichier logo.svg que vous pouvez écraser).

Vous constaterez que malgré cela, le logo en haut à gauche n'apparait toujours pas.

En React.JS, les images ont besoin d'être importées (comme le CSS).

Ajoutez donc cet import en haut du fichier "App.js" : import logo from './logo.svg';, puis modifiez la balise image de cette manière pour y associer la ressource chargée : <img src={logo} alt="" />

Votre image devrait maintenant apparaitre.

Charger les icônes Fontawesome

La bibliothèque Fontawesome est disponible sous forme d'une dépendance de npm.

Pour l'installer, utilisez dans votre terminal la commande suivante :

npm install @fortawesome/fontawesome-free

Puisque c'est une bibliothèque CSS, vous pouvez l'importer très facilement en ajoutant cette ligne en haut du fichier "App.js :

import '@fortawesome/fontawesome-free/css/all.css'

💡 Votre application devrait maintenant être identique à la maquette initiale. Il nous reste à la découper en composants !