Lesson · Anleitung · 4 min

Statt reines HTML/CSS/JS von Hand: Komponenten, State-Management, Routing und Konventionen.

• Framework = fertiges Grundgerüst mit Regeln und Werkzeugen
• Vorgefertigte Bausteine statt alles selbst zu bauen

Lesson · Anleitung · 3 min

React als Bibliothek lässt dir die Struktur; Angular/Next.js geben eine feste Struktur vor.

• Bibliothek (z. B. React): du entscheidest die Struktur, holst Werkzeuge
• Framework (z. B. Angular, Next.js): feste Struktur vorgegeben

Lesson · Anleitung · 5 min

Interaktive UIs, SPAs, Flexibilität — und später React Native für Mobile.

• Sprache: JavaScript / TypeScript · Typ: Bibliothek · Von: Meta
• Komponentenbasiert für interaktive Oberflächen
• Wann: SPAs, großes Ökosystem, Pfad zu React Native

Practice · Anleitung · 5 min

Props (`name`) und `useState` für einen Klick-Zähler — Kernidee von React.

• Funktionelle Komponenten mit JSX zurückgeben
• `useState` hält lokalen UI-Zustand
• Props reichen Daten in Kind-Komponenten

Lesson · Anleitung · 5 min

Production-ready React: Server-/Client-Code, SEO, Konventionen — Routing nicht manuell.

• Baut auf React auf · Von: Vercel
• SSR, Routing, SEO „out of the box“
• Wann: Marketing/Blog/Shop, Fullstack im selben Projekt
• Merke: Next.js = React + Routing + Server-Rendering + Konventionen

Lesson · Anleitung · 3 min

`app/page.tsx` = Startseite, `app/ueber-uns/page.tsx` → Route `/ueber-uns`.

• Ordner unter `app/` werden zu Routen
• Jede `page.tsx` ist eine Seite

Lesson · Anleitung · 5 min

HTML-nahe Templates statt JSX; oft in europäischen/asiatischen Firmen; Nuxt ≈ Next für Vue.

• Framework, component-basiert, oft einsteigerfreundlicher als React
• `<template>` + `<script setup>` mit `ref`
• Wann: sanfte Lernkurve, mittelgroße Projekte
• Nuxt.js = SSR/Routing/Struktur für Vue (wie Next zu React)

Lesson · Anleitung · 4 min

Routing, Forms, HTTP, Dependency Injection — steilere Lernkurve, sehr strukturiert.

• TypeScript Pflicht · Von: Google
• Vollständiges Framework: Routing, Forms, HTTP, DI
• Wann: große Enterprise-Apps, feste Konventionen im Team

Lesson · Anleitung · 4 min

Kein Framework-Runtime im Browser; Fokus Performance und kleine Bundle-Größe.

• Compiler-basiert: Framework-Code verschwindet im Build
• Wann: Performance / kleine Bundles, kleine bis mittlere Projekte
• SvelteKit = Next.js-Äquivalent für Svelte

Lesson · Anleitung · 5 min

Von FastAPI (schnelle APIs) über Django/Flask bis Express/NestJS auf Node.

• FastAPI (Python): schnelle APIs, Docs, async
• Django: Batteries included, Admin; Flask: minimal
• Express: flexibel auf Node; NestJS: strukturiert wie Angular

Practice · Anleitung · 3 min

`@app.get("/hallo/{name}")` liefert JSON — typischer API-Endpunkt.

• `FastAPI()`-App anlegen
• Pfad-Parameter und Dict-Response

Lesson · Anleitung · 5 min

Lernen: React/Vue · SEO: Next/Nuxt · Enterprise: Angular · Performance: Svelte · API: FastAPI.

• Lernen / klein: React oder Vue
• SEO (Blog, Shop): Next.js oder Nuxt
• Großes Team / strikte Struktur: Angular
• Kleine Bundles: Svelte / SvelteKit
• Python-API: FastAPI · JS-Backend: Express oder NestJS
• Mobile aus Web-Skills: React Native

Practice · Anleitung · 3 min

Frontend React/Next + TypeScript, Backend FastAPI, DB PostgreSQL, Styling Tailwind.

• Frontend: React (oder Next.js) + TypeScript
• Backend: FastAPI (Python)
• Datenbank: PostgreSQL · Styling: Tailwind CSS

Bridge · Anleitung · 1 min

React/Vue/Svelte = Oberfläche · Next/Nuxt/Angular = Gerüst · FastAPI/Express/Django = Backend.

• React/Vue/Svelte = wie die Oberfläche aussieht und reagiert
• Next.js/Nuxt/Angular = komplettes Gerüst (Routing, Server, Struktur)
• FastAPI/Express/Django = Logik & Daten im Hintergrund
• Frontend und Backend sprechen über eine API (meist JSON)