Datei- und Ordnerstruktur-Organisation

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

• Erstellen Sie einen separaten Ordner für jede Komponente;
• Erstellen Sie eine jsx-Datei für diese Komponente;
• Erstellen Sie eine module.css-Datei für diese Komponente;
• Kombinieren Sie sie, damit die jsx-Datei über die Stile Bescheid weiß.

Was kommt als Nächstes? Um Klarheit zu gewährleisten, werden wir eine einfache App entwickeln, um deren Organisation zu verstehen.

Hinweis

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

Die Komponenten, aus denen unsere App besteht, umfassen:

• Die Bar-Komponente repräsentiert die Navigationsleiste der App, bestehend aus einem Logo und verschiedenen Links;
• Die Information-Komponente zeigt ein Bild und begleitenden Textinhalt an;
• Die Footer-Komponente repräsentiert das Urheberrecht und alle Rechte vorbehalten;
• Die Section-Komponente dient als Hintergrundelement. Sie fungiert als Wrapper, der den gesamten Inhalt mit Hilfe von CSS zentral ausrichtet;
• Die App-Komponente repräsentiert die gesamte App. Wir werden das gesamte Projekt innerhalb der App.jsx-Datei konstruieren und es in die Hauptdatei index.js importieren.

Organisation

Bei der Organisation unserer Dateien folgen wir einer Struktur, bei der jede Komponente ihren eigenen Ordner hat. Wir erstellen eine jsx-Datei in jedem Ordner und eine entsprechende module.css-Datei. Dieser Ansatz führt zu der folgenden Struktur:

Wie weiß index.js von allen Komponenten?

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

Wir importieren eine Datei mit Hilfe der import-Anweisung und dem korrekten Pfad zur Datei.

Lassen Sie uns einige Komponenten erstellen, um die Syntax zu überprüfen.

App-Komponente

Die Datei App.jsx ist der Einstiegspunkt, an dem wir alle anderen Komponenten importieren und zusammenstellen, um das Projekt zu erstellen. Dies beinhaltet das Importieren aller notwendigen Komponenten innerhalb der Datei App.jsx und das entsprechende Strukturieren der App.

Sie haben möglicherweise beobachtet, dass Dateiexporte ebenso wichtig sind wie Dateiimporte. Ein ordnungsgemäßer Export ermöglicht es, eine Komponente in eine andere Datei zu importieren. Daher dient die Zeile 17 speziell für die App-Komponente dem Zweck, sie zu exportieren. Dies stellt sicher, dass die App-Komponente für andere Teile des Codebasises verfügbar ist, um sie innerhalb der Anwendung zu importieren und zu nutzen. Die Syntax lautet:

Section-Komponente

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

Section.jsx Code:

Section.module.css Code:

Bar-Komponente

Die Bar-Komponente rendert ein spezifisches Markup und wendet entsprechende Stile an. Die allgemeine Organisation dieses Prozesses bleibt konsistent. Wir beginnen mit dem Import der mit der Komponente verbundenen CSS-Datei, erstellen dann die Komponente selbst, in der wir das notwendige Markup rendern und Klassennamen anwenden, um das gewünschte Styling zu erreichen. Schließlich exportieren wir die Komponente, um ihre Verfügbarkeit in anderen Teilen des Codebasises sicherzustellen.

Bar.jsx Code:

Bar.module.css Code:

Hinweis

Um das Kapitel nicht zu überfrachten, werden wir nicht in eine detaillierte Analyse der anderen Komponenten eintauchen. Dies liegt daran, dass der Prozess für jede Komponente genau derselbe ist. Stattdessen ermutige ich Sie, das unten bereitgestellte vollständige Projekt gründlich zu untersuchen. Nehmen Sie sich die Zeit, jeden Ordner zu inspizieren und jede Komponente zu öffnen, um deren Organisation zu verstehen. Dies ist entscheidend, da im weiteren Verlauf zusätzliche Komponenten hinzugefügt werden. Es ist wichtig, dass wir zu diesem Zeitpunkt keine Details übersehen.

Vollständiger App-Code:

Hinweis

Um das Projektverzeichnis zu untersuchen, klicken Sie auf den Schieberegler auf der linken Seite der Schnittstelle, um es zu erweitern. In der oberen linken Ecke finden Sie eine Burger-Schaltfläche (dargestellt durch drei horizontale Linien). Durch Klicken auf die Burger-Schaltfläche erhalten Sie Zugriff auf das Projektverzeichnis, sodass Sie die Dateien und Ordner innerhalb des Projekts erkunden können.