Voordat we verdergaan met de stijlen, moeten we nadenken over de structuur van mappen en de organisatie van de code. In het vorige hoofdstuk hebben we dit onderwerp al kort besproken. We weten al dat we het volgende nodig hebben:

• Een aparte map aanmaken voor elk component;
• Een jsx-bestand aanmaken voor dit component;
• Een module.css-bestand aanmaken voor dit component;
• Deze combineren zodat het jsx-bestand op de hoogte is van de stijlen.

Wat is de volgende stap? Om duidelijkheid te waarborgen, ontwikkelen we een eenvoudige app om de organisatie ervan te begrijpen.

Opmerking

Volledige projectcode en live pagina zijn te vinden aan het einde van dit hoofdstuk.

De componenten waaruit onze app bestaat zijn:

• Het Bar-component vertegenwoordigt de navigatiebalk van de app, bestaande uit een logo en verschillende links;
• Het Information-component toont een afbeelding en bijbehorende tekstinhoud;
• Het Footer-component vertegenwoordigt het copyright en alle rechten voorbehouden;
• Het Section-component fungeert als een achter-de-schermen element. Het werkt als een wrapper die alle inhoud centraal uitlijnt met behulp van CSS;
• Het App-component vertegenwoordigt de gehele app. We bouwen het volledige project binnen het App.jsx-bestand en importeren dit in het hoofd index.js-bestand.

Organisatie

Bij het organiseren van onze bestanden volgen we een structuur waarbij elk component een eigen map heeft. We maken een jsx-bestand aan binnen elke map en een bijbehorend module.css-bestand. Deze aanpak leidt tot de volgende structuur:

Hoe weet index.js van alle componenten?

Zoals eerder vermeld, bouwen we het volledige project op in het App.jsx-bestand, en vervolgens importeren en renderen we die component (App component) in het index.js-bestand.

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

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

root.render(<App />);

We importeren een bestand met behulp van de import-verklaring en het juiste pad naar het bestand.

import <file_name> from "<file_path>";

Laten we enkele componenten aanmaken om de syntaxis te controleren.

App component

Het App.jsx -bestand is het startpunt waar alle andere componenten worden geïmporteerd en samengevoegd om het project op te bouwen. Dit houdt in dat alle benodigde componenten binnen het App.jsx-bestand worden geïmporteerd en de app dienovereenkomstig wordt gestructureerd.

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

Het is mogelijk opgevallen dat bestandsexporten net zo belangrijk zijn als bestandsimporten. Correct exporteren maakt het mogelijk om een component in een ander bestand te importeren. Daarom is regel 17 specifiek voor de App component toegevoegd om deze te exporteren. Dit zorgt ervoor dat de App component beschikbaar is voor andere delen van de codebase om te importeren en te gebruiken binnen de applicatie. De syntaxis is:

export default <component_name>;

Section component

Dient als app-wrapper. Ontvangt de children prop en rendert deze in het div-element. De div heeft enkele stijlen die zijn toegevoegd met behulp van het Section.module.css-bestand.

Section.jsx code:

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

Section.module.css code:

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

Bar-component

Het Bar-component rendert een specifieke markup en past de bijbehorende stijlen toe. De algemene organisatie van dit proces blijft consistent. We beginnen met het importeren van het CSS-bestand dat bij het component hoort, waarna we het component zelf aanmaken, waarin we de benodigde markup renderen en class-namen toepassen om de gewenste styling te bereiken. Tot slot exporteren we het component, zodat het beschikbaar is in andere delen van de codebase.

Bar.jsx code:

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

Bar.module.css code:

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

Opmerking

Om te voorkomen dat het hoofdstuk te uitgebreid wordt, gaan we niet dieper in op een gedetailleerde analyse van de andere componenten. Dit komt doordat het proces voor elk component exact hetzelfde is. In plaats daarvan raad ik aan om het volledige project hieronder grondig te bestuderen. Neem de tijd om elke map te bekijken en elk component te openen om de organisatie ervan te begrijpen. Dit is essentieel, want naarmate we verder gaan, zullen er extra componenten worden toegevoegd. Het is belangrijk dat we op dit moment geen details over het hoofd zien.

Volledige app-code:

Opmerking

Om de projectroot te bekijken, klik op de schuifregelaar aan de linkerkant van de interface om deze uit te vouwen. In de linkerbovenhoek vind je een hamburgerknop (weergegeven door drie horizontale lijnen). Door op de hamburgerknop te klikken, krijg je toegang tot de projectroot en kun je de bestanden en mappen binnen het project verkennen.