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
Abschnitt betitelt „Schritt 1: Projektinitialisierung“Zuerst erstellen wir ein neues Vite-Projekt mit React:
npm create vite@latest produkt-manager -- --template reactcd produkt-managerSchritt 2: Abhängigkeiten installieren
Abschnitt betitelt „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 dayjsSchritt 3: Projektstruktur erstellen
Abschnitt betitelt „Schritt 3: Projektstruktur erstellen“Erstellen Sie folgende Ordnerstruktur in Ihrem Projekt:
src/ ├── components/ ├── contexts/ ├── pages/ ├── services/ ├── utils/ ├── App.jsx ├── App.css ├── main.jsxSie können dies auf der Kommandozeile mit den folgenden Befehlen tun:
mkdir src\componentsmkdir src\contextsmkdir src\pagesmkdir src\servicesmkdir src\utilsSchritt 4: Einrichtung der Einstiegsdatei
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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?
Abschnitt betitelt „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
Abschnitt betitelt „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.