Organisation des Structures de Fichiers et de Dossiers pour les Styles
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 fichierApp.jsx
et importée dans le fichier principalindex.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.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Organisation des Structures de Fichiers et de Dossiers pour les Styles
Glissez pour afficher le menu
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 fichierApp.jsx
et importée dans le fichier principalindex.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.
Merci pour vos commentaires !