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 bieden, 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 tekstuele inhoud;
• Het Footer-component vertegenwoordigt het copyright en alle rechten voorbehouden;
• Het Section-component fungeert als een achter-de-schermen element. Het dient als een wrapper die alle inhoud centraal uitlijnt met behulp van CSS;
• Het App-component vertegenwoordigt de volledige app. We bouwen het hele project binnen het bestand App.jsx en importeren het in het hoofdbestand index.js.

Organisatie

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

Hoe weet index.js van alle componenten?

Zoals eerder vermeld, bouwen we het volledige project binnen 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 syntax te controleren.

App-component

Het App.jsx -bestand is het startpunt waar we alle andere componenten importeren en samenstellen 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 bestandsexports net zo belangrijk zijn als bestandsimports. Correct exporteren maakt het mogelijk om een component in een ander bestand te importeren. Het opnemen van regel 17 specifiek voor de App-component dient dus 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 syntax is:

export default <component_name>;

Sectiecomponent

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

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

Balkcomponent

De 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 de component hoort, vervolgens creëren we de component zelf, waarin we de benodigde markup renderen en classnamen toepassen om de gewenste styling te bereiken. Tot slot exporteren we de component, zodat deze 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 in op een gedetailleerde analyse van de andere componenten. Dit komt doordat het proces voor elke component exact hetzelfde is. In plaats daarvan wordt aangeraden het volledige project hieronder grondig te bestuderen. Neem de tijd om elke map te inspecteren en elke component te openen om de organisatie te begrijpen. Dit is essentieel, omdat er in de toekomst extra componenten zullen 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 hamburgermenu (weergegeven door drie horizontale lijnen). Door op het hamburgermenu te klikken, krijg je toegang tot de projectroot en kun je de bestanden en mappen binnen het project verkennen.