Avant de poursuivre avec les styles, il est nécessaire de réfléchir à la structuration des dossiers et à l'organisation du code. Ce sujet a été abordé dans le chapitre précédent. Nous savons déjà qu'il faut :

• Créer un dossier séparé pour chaque composant ;
• Créer un fichier jsx pour ce composant ;
• Créer un fichier module.css pour ce composant ;
• Les combiner afin que le fichier jsx puisse accéder aux styles.

Quelle est la suite ? Pour garantir la clarté, nous allons développer une application simple afin de comprendre son organisation.

Remarque

Le code complet du projet et la page en ligne sont disponibles à la fin de ce chapitre.

Les composants qui composent notre application incluent :

• Le composant Bar représente la barre de navigation de l'application, composée d'un logo et de différents liens ;
• Le composant Information affiche une image et un contenu textuel associé ;
• Le composant Footer représente les droits d'auteur et la mention "tous droits réservés" ;
• Le composant Section sert d'élément en arrière-plan. Il agit comme un conteneur, alignant tout le contenu au centre grâce au CSS ;
• Le composant App représente l'ensemble de l'application. L'intégralité du projet sera construite dans le fichier App.jsx et importée dans le fichier principal index.js.

Organisation

Lors de l'organisation de nos fichiers, nous suivons une structure où chaque composant possède son propre dossier dédié. Nous créons un fichier jsx dans chaque dossier ainsi qu'un fichier module.css correspondant. Cette approche conduit à la structure suivante :

Comment index.js connaît-il tous les composants ?

Comme mentionné précédemment, nous construisons l'ensemble du projet dans le fichier App.jsx, puis nous importons et rendons ce composant (App component) dans le fichier index.js.

import { createRoot } from "react-dom/client";
import App from "./App/App";

const root = createRoot(document.getElementById("root"));

root.render(<App />);

Nous importons un fichier à l'aide de l'instruction import et du chemin correct vers le fichier.

import <file_name> from "<file_path>";

Création de quelques composants pour vérifier la syntaxe.

Composant App

Le fichier App.jsx constitue le point d'entrée où nous importons et assemblons tous les autres composants pour construire le projet. Cela implique d'importer tous les composants nécessaires dans le fichier App.jsx et de structurer l'application en conséquence.

// Import of all components
import Section from "../Section/Section";
import Bar from "../Bar/Bar";
import Footer from "../Footer/Footer";
import Information from "../Information/Information";

// Creation of the whole app
const App = () => (
  <Section>
    <Bar />
    <Information />
    <Footer />
  </Section>
);

// Component export
export default App;

Vous avez peut-être remarqué que les exports de fichiers sont également essentiels en plus des imports de fichiers. Un export correct permet d'importer un composant dans un autre fichier. Ainsi, l'inclusion de la ligne 17 spécifiquement pour le composant App a pour but de l'exporter. Cela garantit que le composant App est disponible pour d'autres parties du code afin d'être importé et utilisé dans l'application. La syntaxe est :

export default <component_name>;

Composant Section

Il sert d’enveloppe pour l’application. Il reçoit la prop children et les rend dans l’élément div. Le div possède certains styles ajoutés à l’aide du fichier Section.module.css.

Code Section.jsx :

// Import of the file with styles
import s from "./Section.module.css";

// Component
const Section = (props) => (
  <div className={s.container}>{props.children}</div>
);

// Export the component
export default Section;

Code Section.module.css :

.container {
  width: 800px;
  margin: 0 auto;
  padding-left: 15px;
}

Composant Bar

Le composant Bar rend une structure HTML spécifique et applique les styles correspondants. L’organisation générale de ce processus reste cohérente. On commence par importer le fichier CSS associé au composant, puis on crée le composant lui-même, où l’on rend la structure nécessaire et applique les noms de classes pour obtenir le style souhaité. Enfin, on exporte le composant afin qu’il soit disponible dans d’autres parties du code.

Code Bar.jsx :

// Import the file with styles
import s from "./Bar.module.css";

// Component
const Bar = () => (
  <div className={s.container}>
    <a href="###" className={s.logo}>
      Logo
    </a>
    <ul className={s.list}>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Home
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          About
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Contact
        </a>
      </li>
    </ul>
  </div>
);

// Export the component
export default Bar;

Code Bar.module.css :

.container {
  background-color: lightcoral;
  padding: 0px 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  text-decoration: none;
  font-size: 28px;
  color: lightcyan;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

.logo:hover,
.logo:focus {
  color: lightsteelblue;
}

.list {
  list-style: none;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.item:not(:last-child) {
  margin-right: 50px;
}

.link {
  text-decoration: none;
  font-size: 20px;
  color: lightblue;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

Remarque

Afin de ne pas surcharger le chapitre, nous n’allons pas analyser en détail les autres composants. En effet, le processus suivi pour chaque composant est exactement le même. Je vous encourage plutôt à examiner attentivement le projet complet fourni ci-dessous. Prenez le temps d’inspecter chaque dossier et d’ouvrir chaque composant pour comprendre son organisation. Cela est essentiel car, au fur et à mesure de la progression, d’autres composants seront ajoutés. Il est important de ne négliger aucun détail à ce stade.

Code complet de l'application :

Remarque

Pour examiner la racine du projet, cliquez sur le curseur situé sur le côté gauche de l'interface pour l'agrandir, puis dans le coin supérieur gauche, vous trouverez un bouton burger (représenté par trois lignes horizontales). En cliquant sur ce bouton burger, vous accéderez à la racine du projet, ce qui vous permettra d'explorer les fichiers et dossiers du projet.