Projektstruktur bereinigen

Nach dem Erstellen des Vite-Projekts enthält es einige Beispieldateien und -code, die für unser Buch-Projekt nicht benötigt werden. In diesem Abschnitt bereinigen wir das Projekt, um eine saubere Grundlage zu schaffen.

1. App.jsx bereinigen

Öffne die Datei src/App.jsx und ersetze den gesamten Inhalt durch:

function App() {
  return (
    <div className="App">
      <h1>Mein Bücher-Projekt</h1>
    </div>
  );
}

export default App;

2. main.jsx bereinigen

Öffne die Datei src/main.jsx und ersetze den gesamten Inhalt durch:

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

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

3. CSS-Dateien anpassen

App.css

Öffne die Datei src/App.css und reduziere sie auf grundlegende Styles:

.App {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

Leere die Datei src/index.css

4. Nicht benötigte Assets entfernen

Löschen Sie die Datei src/assets/react.svg
Erstellen Sie einen neuen Ordner für Ihre eigenen Assets: bash mkdir -p src/assets/images

5. index.html anpassen

Öffne die Datei index.html im Hauptverzeichnis und passe sie an:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/book-icon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Eine Anwendung zur Verwaltung von Büchern"
    />
    <title>Bücher-Projekt</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

6. Projektstruktur erweitern

Erstelle folgende Ordnerstruktur für dein Projekt:

mkdir -p src/components
mkdir -p src/pages
mkdir -p src/hooks
mkdir -p src/context
mkdir -p src/services
mkdir -p src/utils

Tipp: Dieser Codeabschnitt kann kopiert und im Terminal eingefügt werden. Die Ordnerstruktur wird damit komplett erstellt.

Diese Ordner werden wir später für verschiedene Teile unserer Anwendung verwenden:

components: Wiederverwendbare UI-Komponenten
pages: Hauptseiten unserer Anwendung
hooks: Benutzerdefinierte React Hooks
context: Context-Provider für globales State Management
services: API-Aufrufe und andere externe Dienste
utils: Hilfsfunktionen und Utilities

Überprüfen der Änderungen

Starte dein Projekt, um zu prüfen, ob alles funktioniert:

npm run dev

Sie sollten nun eine leere Seite mit der Überschrift “Mein Bücher-Projekt” sehen.

Zusammenfassung

Wir haben die Vite-Standarddateien bereinigt
Wir haben eine grundlegende Projektstruktur erstellt
Wir haben die CSS-Dateien vereinfacht
Wir haben eine saubere Grundlage für unser Bücher-Projekt geschaffen

Im nächsten Schritt werden wir unsere ersten React-Komponenten erstellen und die Struktur unserer Anwendung aufbauen.