Svelte vs. React - Vergleich der JavaScript Frameworks

Wir programmieren mit Svelte und React dieselbe Wochenplaner App, um die beiden Frameworks zu vergleichen in Bezug auf Syntax, Konzepte, Developer Experience und Bundle Size.

📝 Quellcode & Demo:
● Code (React): https://github.com/ScriptRaccoon/week...
● Demo (React): https://week-planner-react.netlify.app/
● Code (Svelte): https://github.com/ScriptRaccoon/week...
● Demo (Svelte): https://week-planner-svelte.netlify.app/

⏱ Zeitmarken
● 00:00:00 Intro
● 00:03:29 Installation mit Vite
● 00:04:26 Svelte: Setup
● 00:05:26 React: Setup
● 00:06:10 Svelte: Header Komponente
● 00:08:27 React: Header Komponente
● 00:11:06 Svelte: Wochenauswahl Komponente
● 00:16:42 React: Wochenauswahl Komponente
● 00:20:13 Svelte: Date Hilfsfunktionen
● 00:22:28 Svelte: State für aktuelle Woche
● 00:24:05 React: State für aktuelle Woche
● 00:25:46 React: Custom Hook
● 00:27:43 Svelte: Keine Custom Hooks
● 00:28:57 Svelte: Formular für neuen Plan
● 00:33:32 React: Formular für neuen Plan
● 00:38:44 Svelte: State aller Pläne
● 00:47:36 React: State aller Pläne
● 00:52:23 Svelte: Speicherung im localstorage
● 00:58:22 React: Speicherung im localstorage
● 01:01:12 Svelte: Pläne rendern
● 01:04:50 React: Pläne rendern
● 01:08:59 Svelte: State für Plan in Bearbeitung
● 01:14:37 React: State für Plan in Bearbeitung
● 01:18:12 Svelte: Plan bearbeiten
● 01:37:02 React: Plan bearbeiten
● 01:57:04 React: Zeitzonen Bug
● 02:00:00 Svelte: Zeitzonen Bug
● 02:03:21 React: Refactoring mit Hilfsfunktionen
● 02:13:17 React: Konditionale Klassen
● 02:15:55 Svelte: Leerer Plan
● 02:16:34 React: Leerer Plan
● 02:16:58 Svelte: Animation für Edit Container
● 02:18:29 React: Animation für Edit Container
● 02:22:31 Svelte: Edit Container intuitiv schließen
● 02:25:27 React: Edit Container intuitiv schließen
● 02:28:33 Barrierefreiheit (accessibility)
● 02:37:53 Outro

💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Svelte: https://svelte.dev
● React: https://react.dev

🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 19: https://www.blackmagicdesign.com/de/p...

#Svelte #React #Tutorial