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