Einrichtung des Projekts

In diesem Kapitel richten wir das Grundgerüst für unsere React-Produktverwaltungsanwendung ein. Nach Abschluss dieses Kapitels wird bereits eine lauffähige, wenn auch einfache React-Anwendung entstehen.

Schritt 1: Projektinitialisierung

Zuerst erstellen wir ein neues Vite-Projekt mit React:

npm create vite@latest produkt-manager -- --template react
cd produkt-manager

Schritt 2: Abhängigkeiten installieren

Als nächstes installieren wir die benötigten Pakete für unser Projekt:

npm install react-bootstrap bootstrap react-router-dom react-icons dayjs

Schritt 3: Projektstruktur erstellen

Erstellen Sie folgende Ordnerstruktur in Ihrem Projekt:

src/
  ├── components/
  ├── contexts/
  ├── pages/
  ├── services/
  ├── utils/
  ├── App.jsx
  ├── App.css
  ├── main.jsx

Sie können dies auf der Kommandozeile mit den folgenden Befehlen tun:

mkdir src\components
mkdir src\contexts
mkdir src\pages
mkdir src\services
mkdir src\utils

Schritt 4: Einrichtung der Einstiegsdatei

Ersetzen Sie den Inhalt der main.jsx-Datei mit folgendem Code:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
)

Schritt 5: App.css einrichten

Erstellen Sie eine leere App.css-Datei im src-Verzeichnis oder ersetzen Sie den vorhandenen Inhalt durch eine leere Datei:

/* Hier können später benutzerdefinierte Stile hinzugefügt werden */

Schritt 6: Erstellen der App.jsx

Ersetzen Sie die vorhandene App.jsx durch folgende einfache Version:

function App() {
    return (
        <div className="d-flex flex-column min-vh-100">
            <header className="bg-dark text-white p-3">
                <h1>Produktverwaltung</h1>
            </header>
            <main className="flex-grow-1 container mt-4">
                <p>Willkommen bei der Produktverwaltung</p>
            </main>
            <footer className="bg-light py-3 mt-auto">
                <div className="container text-center text-muted">
                    <p className="mb-0">© {new Date().getFullYear()} Produkt Manager</p>
                </div>
            </footer>
        </div>
    );
}

export default App;

Schritt 7: Anwendung starten

Starten Sie nun die Anwendung mit:

npm run dev

Öffnen Sie Ihren Browser und navigieren Sie zur angezeigten URL, in der Regel http://localhost:5173. Sie sollten nun eine einfache Seite mit einer Kopfzeile, einer Willkommensnachricht und einer Fusszeile sehen.

Was passiert hier?

Wir haben eine neue React-Anwendung mit Vite erstellt, die schneller ist als Create React App
Wir haben Bootstrap für das Styling installiert
Wir haben eine grundlegende Ordnerstruktur erstellt, die uns später beim Organisieren des Codes helfen wird
Unsere einfache App-Komponente nutzt bereits Bootstrap-Klassen für das Layout
Die Anwendung ist bereits lauffähig und zeigt eine einfache Benutzeroberfläche an

Zusammenfassung

In diesem Abschnitt haben wir:

Ein neues React-Projekt mit Vite erstellt
Die notwendigen Abhängigkeiten installiert
Die grundlegende Projektstruktur angelegt
Die Haupteinstiegsdatei (main.jsx) erstellt
Ein einfaches App-Grundgerüst implementiert

Die Anwendung ist jetzt lauffähig und zeigt eine einfache UI an. Im nächsten Kapitel werden wir das Routing und die Navigationskomponente erstellen, um zwischen verschiedenen Seiten navigieren zu können.