Prima di procedere con gli stili, è necessario considerare la strutturazione delle cartelle e l'organizzazione del codice. Nel capitolo precedente, abbiamo già accennato a questo argomento. Sappiamo già che dobbiamo:

• Creare una cartella separata per ciascun componente;
• Creare un file jsx per questo componente;
• Creare un file module.css per questo componente;
• Collegarli in modo che il file jsx possa accedere agli stili.

Cosa viene dopo? Per garantire chiarezza, svilupperemo una semplice applicazione per comprenderne l'organizzazione.

Nota

Il codice completo del progetto e la pagina live sono disponibili alla fine di questo capitolo.

I componenti che compongono la nostra applicazione includono:

• Il componente Bar rappresenta la barra di navigazione dell'app, composta da un logo e vari link;
• Il componente Information visualizza un'immagine e il relativo contenuto testuale;
• Il componente Footer rappresenta il copyright e tutti i diritti riservati;
• Il componente Section funge da elemento di supporto. Agisce come un contenitore che allinea centralmente tutto il contenuto grazie al CSS;
• Il componente App rappresenta l'intera applicazione. Costruiremo l'intero progetto all'interno del file App.jsx e lo importeremo nel file principale index.js.

Organizzazione

Quando organizziamo i nostri file, seguiamo una struttura in cui ogni componente ha la propria cartella dedicata. All'interno di ciascuna cartella creiamo un file jsx e un corrispondente file module.css. Questo approccio porta alla seguente struttura:

Come fa index.js a conoscere tutti i componenti?

Come menzionato in precedenza, l'intero progetto viene costruito all'interno del file App.jsx, e successivamente importiamo e renderizziamo quel componente (componente App) nel file index.js.

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

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

root.render(<App />);

Importiamo un file utilizzando l'istruzione import e il percorso corretto verso il file.

import <file_name> from "<file_path>";

Creiamo alcuni componenti per verificare la sintassi.

Componente App

Il file App.jsx rappresenta il punto di ingresso in cui importiamo e assembliamo tutti gli altri componenti per costruire il progetto. Questo comporta l'importazione di tutti i componenti necessari all'interno del file App.jsx e la strutturazione dell'app di conseguenza.

// 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;

Avrai notato che anche le esportazioni dei file sono fondamentali oltre alle importazioni. Una corretta esportazione consente di importare un componente in un altro file. Pertanto, includere la riga 17 specificamente per il componente App serve a esportarlo. Questo garantisce che il componente App sia disponibile per essere importato e utilizzato in altre parti del codice dell'applicazione. La sintassi è:

export default <component_name>;

Componente Section

Funziona come wrapper dell'applicazione. Riceve la prop children e la renderizza all'interno dell'elemento div. Il div ha alcuni stili che sono stati aggiunti tramite il file Section.module.css.

Codice 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;

Codice Section.module.css:

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

Componente Bar

Il componente Bar rende un markup specifico e applica gli stili corrispondenti. L'organizzazione generale di questo processo rimane coerente. Si inizia importando il file CSS associato al componente, quindi si procede alla creazione del componente stesso, dove viene reso il markup necessario e vengono applicati i nomi delle classi per ottenere lo stile desiderato. Infine, si esporta il componente, garantendone la disponibilità in altre parti della codebase.

Codice 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;

Codice 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;
}

Nota

Per evitare di appesantire il capitolo, non entreremo in un'analisi dettagliata degli altri componenti. Questo perché il processo seguito per ciascun componente è esattamente lo stesso. Invece, ti invito a esaminare attentamente il progetto completo fornito di seguito. Prenditi il tempo necessario per ispezionare ogni cartella e aprire ciascun componente per comprenderne l'organizzazione. Questo è fondamentale perché, man mano che progrediamo, verranno aggiunti ulteriori componenti. È importante non trascurare alcun dettaglio in questa fase.

Codice completo dell'app:

Nota

Per esaminare la radice del progetto, clicca sullo slider sul lato sinistro dell'interfaccia per espanderlo e, nell'angolo in alto a sinistra, troverai un pulsante burger (rappresentato da tre linee orizzontali). Facendo clic sul pulsante burger avrai accesso alla radice del progetto, potendo così esplorare i file e le cartelle all'interno del progetto.