React Projekt aufsetzen

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.jsanpassen:

/** @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