Bevor wir mit den Styles fortfahren, müssen wir die Strukturierung der Dateiordner und die Organisation des Codes berücksichtigen. Im vorherigen Kapitel haben wir dieses Thema bereits angesprochen. Wir wissen bereits, dass wir Folgendes benötigen:

• Einen separaten Ordner für jede Komponente erstellen;
• Eine jsx-Datei für diese Komponente anlegen;
• Eine module.css-Datei für diese Komponente anlegen;
• Diese so kombinieren, dass die jsx-Datei von den Styles weiß.

Wie geht es weiter? Zur besseren Übersicht entwickeln wir eine einfache App, um deren Organisation zu verstehen.

Hinweis

Vollständiger Projektcode und Live-Seite sind am Ende dieses Kapitels zu finden.

Die Komponenten, aus denen unsere App besteht, sind:

• Die Bar-Komponente stellt die Navigationsleiste der App dar, bestehend aus einem Logo und verschiedenen Links;
• Die Information-Komponente zeigt ein Bild sowie zugehörigen Textinhalt an;
• Die Footer-Komponente repräsentiert das Copyright und alle Rechte vorbehalten;
• Die Section-Komponente dient als Hintergrundelement. Sie fungiert als Wrapper und richtet mit Hilfe von CSS alle Inhalte zentral aus;
• Die App-Komponente repräsentiert die gesamte App. Das gesamte Projekt wird in der Datei App.jsx aufgebaut und in die Hauptdatei index.js importiert.

Organisation

Bei der Organisation unserer Dateien folgen wir einer Struktur, bei der jede Komponente ihren eigenen Ordner erhält. In jedem Ordner wird eine jsx-Datei und eine zugehörige module.css-Datei erstellt. Dieser Ansatz führt zu folgender Struktur:

Wie weiß index.js von allen Komponenten?

Wie bereits erwähnt, erstellen wir das gesamte Projekt in der Datei App.jsx und importieren und rendern anschließend diese Komponente (App-Komponente) in der Datei index.js.

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

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

root.render(<App />);

Eine Datei wird mit Hilfe der import-Anweisung und dem korrekten Pfad zur Datei importiert.

import <file_name> from "<file_path>";

Erstellung einiger Komponenten zur Überprüfung der Syntax.

App-Komponente

Die Datei App.jsx ist der Einstiegspunkt, an dem alle anderen Komponenten importiert und zusammengefügt werden, um das Projekt zu erstellen. Dies beinhaltet das Importieren aller benötigten Komponenten in der Datei App.jsx und das entsprechende Strukturieren der App.

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

Es ist zu beachten, dass Datei-Exporte ebenso wichtig sind wie Datei-Importe. Durch korrektes Exportieren kann eine Komponente in eine andere Datei importiert werden. Daher dient das Einfügen von Zeile 17 speziell für die App-Komponente dem Zweck, diese zu exportieren. Dadurch steht die App-Komponente anderen Teilen des Codes zur Verfügung und kann innerhalb der Anwendung genutzt werden. Die Syntax lautet:

export default <component_name>;

Section-Komponente

Dient als Wrapper der App. Sie erhält die children-Prop und rendert diese im div-Element. Das div verfügt über einige Stile, die mit Hilfe der Datei Section.module.css hinzugefügt wurden.

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-Komponente

Die Bar-Komponente rendert eine spezifische Markup-Struktur und wendet die entsprechenden Styles an. Die Organisation dieses Prozesses bleibt dabei stets konsistent. Zunächst wird die zur Komponente gehörende CSS-Datei importiert. Anschließend wird die Komponente selbst erstellt, in der das benötigte Markup gerendert und die passenden Klassennamen für das gewünschte Styling vergeben werden. Abschließend wird die Komponente exportiert, um ihre Verfügbarkeit in anderen Teilen des Codes sicherzustellen.

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

Hinweis

Um das Kapitel nicht zu überladen, wird auf eine detaillierte Analyse der weiteren Komponenten verzichtet. Der Ablauf ist bei jeder Komponente exakt derselbe. Stattdessen empfiehlt es sich, das unten bereitgestellte vollständige Projekt sorgfältig zu untersuchen. Es ist ratsam, jeden Ordner zu prüfen und jede Komponente zu öffnen, um deren Organisation nachzuvollziehen. Dies ist besonders wichtig, da im weiteren Verlauf zusätzliche Komponenten hinzukommen werden. Es ist entscheidend, dass in dieser Phase keine Details übersehen werden.

Vollständiger App-Code:

Hinweis

Um das Projektverzeichnis anzuzeigen, auf den Schieberegler auf der linken Seite der Oberfläche klicken, um diesen zu erweitern. In der oberen linken Ecke befindet sich ein Burger-Button (dargestellt durch drei horizontale Linien). Durch Klicken auf den Burger-Button erhält man Zugriff auf das Projektverzeichnis und kann die Dateien und Ordner innerhalb des Projekts erkunden.