Ausgangslage
Ubuntu 22.04.5 LTS mit node v20.17.0 und npm 10.8.2
React-Projekt einrichten
- Terminal öffnen und in das Verzeichnis navigieren, in dem das Verzeichnis für das Projekt erstellt werden soll.
- Erstelle ein neues Vite-Projekt mit React (Vite ist ein moderner Build-Tool, der schneller als Create React App ist):
npm create vite@latest my-react-app -- --template react
- Wechsle in das neue Projektverzeichnis und installiere die Abhängigkeiten:
cd my-react-app && npm install
4: Starte den Entwicklungsserver:
npm run dev
Jetzt kanns im Browser unter http://localhost:5173 die React-Anwendung aufgerufen werden.
Projektstruktur
my-react-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── App.jsx │ ├── App.css │ ├── index.css │ └── main.jsx ├── .gitignore ├── index.html ├── package.json ├── package-lock.json └── vite.config.js
Wichtige Dateien:
- src/App.jsx: Deine Hauptkomponente
- src/main.jsx: Der Einstiegspunkt deiner Anwendung
- index.html: Die HTML-Vorlage
- package.json: Projektkonfiguration und Abhängigkeiten
Nützliche npm Befehle:
- npm run dev: Startet den Entwicklungsserver
- npm run build: Erstellt eine optimierte Produktionsversion
- npm run preview: Zeigt die Produktionsversion lokal an
Wichtige Tools
Tailwind CSS
Tailwind CSS ist ein Utility-First-CSS-Framework, das eine Sammlung von vordefinierten CSS-Klassen bereitstellt, die man direkt in deinem HTML (oder JSX) verwenden kannst. Anstatt vordefinierte Komponenten (wie Buttons oder Karten) anzubieten, bietet Tailwind kleine, atomare Utility-Klassen, die man kombinieren kann, um benutzerdefinierte Designs zu erstellen.
Utility-First-Ansatz
Der Utility-First-Ansatz bedeutet, dass man Stile durch das Kombinieren von kleinen, spezifischen Klassen anwendest. Jede Klasse entspricht einer CSS-Eigenschaft.
Beispiel:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Klick mich </button>
bg-blue-500
: Hintergrundfarbe (blau, 500er Stufe).text-white
: Textfarbe (weiß).font-bold
:Schriftstärke (fett).py-2
: Padding oben und unten (2 Einheiten).px-4
: Padding links und rechts (4 Einheiten).rounded
: Abgerundete Ecken.
Warum werden PostCSS und Autoprefixer mit Tailwind CSS verwendet?
Tailwind CSS ist ein Utility-First-Framework, das stark auf PostCSS angewiesen ist, um:
- Utility-Klassen zu generieren: Tailwind verwendet PostCSS, um die Utility-Klassen (z. B.
mt-4
,text-center
) in normales CSS umzuwandeln. - CSS zu optimieren: PostCSS entfernt ungenutzte CSS-Klassen (mit dem
purge
-Feature), um die Bundle-Größe zu reduzieren. - Browser-Präfixe hinzuzufügen: Autoprefixer stellt sicher, dass das generierte CSS in allen Browsern funktioniert.
PostCSS
PostCSS ist ein Tool zur Transformation von CSS mit JavaScript. Es fungiert als eine Art "CSS-Compiler" und ermöglicht es, CSS durch Plugins zu erweitern und zu optimieren.
Wofür braucht man PostCSS?
- Tailwind CSS: Tailwind verwendet PostCSS, um seine Utility-Klassen in normales CSS umzuwandeln.
- CSS-Modernisierung: PostCSS kann modernes CSS (z. B. CSS-Variablen, verschachtelte Regeln) in browserkompatibles CSS umwandeln.
- Plugin-Ökosystem: Es gibt zahlreiche PostCSS-Plugins, die zusätzliche Funktionen bieten, z. B.:
- Autoprefixer (für Browser-Präfixe)
- CSS-Nano (für CSS-Minifizierung)
- CSS-Modules (für lokale Scope-CSS)
Autoprefixer
Autoprefixer ist ein PostCSS-Plugin, das automatisch Browser-Präfixe (Vendor-Prefixes) zu deinem CSS hinzufügt. Dies stellt sicher, dass dein CSS in allen Browsern korrekt funktioniert.
Wofür braucht man Autoprefixer?
- Browser-Kompatibilität: Einige CSS-Eigenschaften (z. B.
flexbox
,grid
,transform
) benötigen browser-spezifische Präfixe wie-webkit-
,-moz-
,-ms-
usw. - Automatisierung: Autoprefixer fügt diese Präfixe automatisch hinzu, basierend auf den Browsern, die du unterstützen möchtest. Du musst dich nicht mehr manuell um Präfixe kümmern.
- Zukunftssicherheit: Autoprefixer entfernt auch veraltete Präfixe, die nicht mehr benötigt werden.
Lucide
Lucide ist eine Sammlung von einfachen, eleganten und konsistenten Icons, die als Open Source verfügbar sind. Es ist der Nachfolger von Feather Icons und bietet eine große Auswahl an Icons für Web- und Mobile-Anwendungen. lucide-react
ist das offizielle React-Paket, das die Lucide-Icons für die Verwendung in React-Projekten bereitstellt.
- Icon-Sammlung: Lucide bietet über 1.000 Icons in einem einheitlichen Designstil.
- Open Source: Die Icons sind kostenlos und unter der MIT-Lizenz verfügbar.
- Einfach und minimalistisch: Die Icons sind schlicht und eignen sich gut für moderne Benutzeroberflächen.
- Skalierbar: Die Icons sind als SVG verfügbar und können in jeder Größe verwendet werden.
Installation und Einrichtung
Installation und Einrichtung:
# Installation npm install -D tailwindcss postcss autoprefixer lucide-react # Tailwind und PostCSS Config erstellen npx tailwindcss init -p
Die erzeugte tailwind.config.js
anpassen:
/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
Tailwind in das Projekt einbinden: In der Datei src/App.css folgenden Inhalt hinzufügen:
@tailwind base; @tailwind components; @tailwind utilities;
Den Entwicklungsserver starten:
npm run dev