Avant de passer aux styles, il est nécessaire de réfléchir à la structuration des dossiers et à l'organisation du code. Ce sujet a déjà é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 prochaine étape ? Pour plus de 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 sont les suivants :

• 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 ainsi qu'un contenu textuel associé ;
• Le composant Footer représente le droit d'auteur et la mention tous droits réservés ;
• Le composant Section agit en coulisses. Il sert d'enveloppe, alignant tout le contenu au centre grâce au CSS ;
• Le composant App représente l'ensemble de l'application. Nous construirons tout le projet dans le fichier App.jsx et l'importerons 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. Nous créons un fichier jsx dans chaque dossier ainsi qu'un fichier module.css correspondant. Cette méthode conduit à la structure suivante :

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

Comme mentionné précédemment, l'ensemble du projet est construit dans le fichier App.jsx, puis ce composant (App) est importé et rendu 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 />);

L'importation d'un fichier se fait à 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ù tous les autres composants sont importés et assemblés 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 aussi essentiels que les imports. Un export correct permet d'importer un composant dans un autre fichier. Ainsi, inclure la ligne 17 spécifiquement pour le composant App permet de l'exporter. Cela garantit que le composant App est disponible pour être importé et utilisé dans d'autres parties de la base de code de l'application. La syntaxe est :

export default <component_name>;

Composant Section

Il sert d'enveloppe à 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 affiche un balisage 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 le balisage nécessaire et applique les noms de classes pour obtenir le style souhaité. Enfin, on exporte le composant afin de le rendre disponible dans d'autres parties de la base de code.

Code de 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 de 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'analyserons pas en détail les autres composants. En effet, le processus suivi pour chaque composant est exactement le même. À la place, il est recommandé d'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é à gauche de l'interface pour l'étendre, 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.