React Server Components (RSC) Notes App Demo / Playground ohne Framework
- Siehe die Live -Serverkomponenten (RSC) Notes App Demo / Playground
- Lesen Sie den Blog -Post -React -Serverkomponenten ohne Framework
Haftungsausschluss
Bitte beachten Sie, dass die folgende Implementierung absolut nichts Optimales ist, es ist absichtlich naiv, unvollständig und für Lern- und Demo -Zwecke gedacht.
Ziele
- Eine etwas funktionale React -Notizen -App (Auflistung, Erstellen, Bearbeiten und Löschen von Notizen mit einem Texttitel & Markdown -Inhalt)
- React Server -Komponenten, die neben Client -Komponenten verwendet werden
- eine Art serverseitiger Rendering
- Eine Art Datenfetchung mit Serverkomponenten
- Routing, das sowohl im Client als auch auf dem Server etwas funktioniert
- Serverkomponenten vom Client aktualisieren
- Ein verwendbarer RSC -Spielplatz
- Vor allem: Lernen Sie
Erste Schritte
Entwickelt auf node.js v18.18.1 + npm v9.8.1
-
git clone dieses Repository -
npm ci
Entwicklerumgebung
- Starten Sie einen Webpack -Prozess, achten Sie auf Änderungen in
./src und geben Sie erstellte Dateien an ./dist aus - Starten
./dist ./server node.js http Server (mit Fastify) ./src http: // localhost: 3000, achten
Produktumgebung
Führen Sie den WebPack Build aus und starten Sie den HTTP -Server von Node.js für die Produktion.
Hauptabhängigkeiten
- Webpack Bundler
- Babel JavaScript -Compiler zur Transporation der JSX -Syntax
- Fastify für den HTTP -Webserver
- A-Route extrem minimale JavaScript / DOM-Routing-Bibliothek mit Nutzung benutzerdefinierter Elemente
Miser
- Erstellt von Timothée "Tim" Pillard @tpillard auf Twitter
- "React Server -Komponenten, ohne Framework" -Blog -Post -Ankündigung auf Twitter
- Basierend auf React Notes App
