Med React 19 innføres en av de mer spennende nyhetene i React på lang tid: React Server Components (RSCs).
"Hva er React Server Components?" spør du kanskje. Veldig kort fortalt kan RSCs sees på som server-side rendering (SSR) på steroider.
Litt mindre kort fortalt kan RSCs selv hente data og rendres i sin helhet på serveren (eller i et byggsteg). Den produserte HTMLen fra komponenten blir så sendt til klienten hvor den flettes automagisk inn i komponent-treet 🤯
"Hva er så fordelene med dette? Hvordan skiller det seg fra måten vi skrev komponenter på tidligere? Hvorfor skal jeg bry meg?". Du stiller mange spørsmål.
I løpet av denne workshopen så kommer du til å bli litt klokere på alt dette. Vi vil bidra med litt faglig input, men vi synes at man lærer best med en "hands on" tilnærming så du skal få lov til å bruke mesteparten av tiden din på å utvikle gjøremålsappen Tudlu.
Denne workshopen passer best for deg som har erfaring med React.
Du kan initialisere applikasjonen manuelt eller, hvis du har Docker, så kan applikasjonen initialiseres med dev container.
git checkout main- Vær i main branch når prosjektet settes oppnpm ci- Installerer nødvendige pakkernpm run db:generate- Setter opp databasen og populerer den med data. Ved spørsmål om navn på migreringen kan du bare trykke entergit checkout task-1-task-1er startpunktet for workshopennpm run dev- Dette gjøres i hver branch for å starte applikasjonen- Åpne applikasjonen
PS! Når du bruker dev containers er det enklest å kjøre kommandoer fra VSCode sin terminal fremfor terminal, iTerm, Hyper osv.
- Installer og kjør Docker
- Installer Dev Containers extension
- Åpne prosjektet i Dev Container (kommer en liten popup i VSCode) - Dette vil installere nødvendige pakker samt sette opp databasen og populerer den med data. Ved spørsmål om navn på migreringen kan du bare trykke enter
git checkout task-1-task-1er startpunktet for workshopennpm run dev- Dette gjøres i hver branch for å starte applikasjonen- Åpne applikasjonen
Det er lagt opp til at du starter med blanke ark i en ny branch for hver oppgave. I hver branch så kommer du til å ha det du trenger av funksjonalitet og komponenter for å løse oppgaven. Hvis du heller vil bruke dine egne komponenter og kode gjennom hele workshopen så må du gjerne gjøre det.
Hvis du i løpet av workshopen står fast eller bare er nysgjerrig på hvordan vi har løst en spesifikk oppgave så ligger vår implementasjon av Tudlu i main branchen.
Detaljer om hver oppgave finner du i en egen README-fil i hver enkelt branch. Dette er oppgavene vi har lagt opp:
-
Oppgave 1: Gjør om TodosWidget til å være en server komponent
git checkout task-1 -
Oppgave 2: Opprette et nytt gjøremål
git checkout task-2 -
Oppgave 3: Bedre UX med Suspense
git checkout task-3 -
Oppgave 4: Endre status på et gjøremål + optimistisk UI
git checkout task-4 -
Oppgave 5: Endre tittel på et gjøremål + optimistisk UI
git checkout task-5