Avant de procéder aux styles, nous devons considérer la structuration des dossiers de fichiers et l'organisation du code. Dans le chapitre précédent, nous avons abordé ce sujet. Nous savons déjà que nous avons besoin des éléments suivants :

• 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 pour que le fichier jsx puisse connaître les styles.

Quelle est la suite ? Pour assurer la clarté, nous développerons une application simple pour comprendre son organisation.

Remarque

Le code complet du projet et la page en direct peuvent être trouvés à 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 divers liens ;
• Le composant Information affiche une image et un contenu textuel d'accompagnement ;
• Le composant Footer représente le droit d'auteur et tous les droits réservés ;
• Le composant Section sert d'élément en coulisses. Il agit comme un conteneur, alignant centralement tout le contenu avec l'aide de CSS ;
• Le composant App représente l'application entière. Nous construirons l'ensemble du 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 a son dossier dédié. Nous créons un fichier jsx dans chaque dossier et 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, et ensuite, nous importons et rendons ce composant (composant App) 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éons quelques composants pour vérifier la syntaxe.

Composant App

Le fichier App.jsx est 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 observé que les exports de fichiers sont également cruciaux en plus des imports de fichiers. Une exportation correcte permet d'importer un composant dans un autre fichier. Ainsi, inclure la ligne 17 spécifiquement pour le composant App sert à l'exporter. Cela garantit que le composant App est disponible pour d'autres parties de la base de code pour l'importer et l'utiliser dans l'application. La syntaxe est :

export default <component_name>;

Composant Section

Il sert de conteneur pour l'application. Il reçoit la prop children et les rend dans l'élément div. Le div a des styles qui ont été 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 un balisage spécifique et applique les styles correspondants. L'organisation générale de ce processus reste cohérente. Nous commençons par importer le fichier CSS associé au composant, puis nous procédons à la création du composant lui-même, où nous rendons le balisage nécessaire et appliquons des noms de classes pour obtenir le style souhaité. Enfin, nous exportons le composant, garantissant sa disponibilité dans d'autres parties de la base de 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

Pour éviter de 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. Au lieu de cela, je vous encourage à 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 crucial car à mesure que nous progressons, des composants supplémentaires seront ajoutés. Il est important de ne pas négliger de détails à ce stade.

Code complet de l'application :

Remarque

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