Lärarguide · Lektion 1 av 8

Intro till Blazor & verktygskedjan

Första lektionen sätter scenen. Mål: alla har skapat och kört en Blazor-app och förstår skillnaden mellan render modes på en hög nivå.

V1

Vecka

2,5 h

Total tid

~50 min

Teori

~70 min

Workshop

Studentmaterial 01-intro.html — säkerställ att alla har läst igenom innan lektionen.

Kompletterande resurser

MS Learn: learn.microsoft.com/aspnet/core/blazor — översikt
Pluralsight: Blazor: The Big Picture (Roland Guijt, ~1 h)

Lektionens mål

Studenten kan förklara vad Blazor är och hur det förhåller sig till ASP.NET Core.
Studenten kan namnge de fyra render modes och säga något om för- och nackdelar.
Studenten har en körande Blazor Web App på sin laptop med hot reload aktiverat.

Agenda (150 min)

0:00

Incheckning + introduktion till kursen, upplägg och examination.

0:15

Teori: Vad är Blazor? Historisk översikt, position i .NET-ekosystemet.

0:35

Teori: Render modes — Static SSR, Server, WebAssembly, Auto. Whiteboard.

1:05

Paus 15 min

1:20

Workshop: dotnet new blazor, kör, hot reload, ändra Counter.

2:20

Avrundning: Q&A, hemuppgift, peka på Pluralsight Big Picture.

2:30

Slut

Talartips per sektion

Om förkunskaper: ta en runda kring rummet. Vilka kommer från MVC/Razor Pages? Vilka från React/Angular? Det styr hur mycket tid du behöver lägga på "komponent-tänk".

Render modes på whiteboard: rita fyra kolumner. För var och en: vad sker vid första request? Vad sker vid knapptryck? Var körs C#? Det blir mycket mer konkret än en tabell.

Undvik "rätt val"-diskussioner: studenter vill veta "vad ska jag välja?". Säg: "Auto är ett gott default i .NET 10. Vi går igenom när man ska avvika i L8." — håll det enkelt nu.

Workshop — guide för läraren

Verifiera först att alla har .NET 10 SDK (versionen ska börja med 10.):
```
dotnet --version
```

Skapa projektet tillsammans:

dotnet new blazor -o YH.Hello --interactivity Auto
cd YH.Hello
dotnet watch

Be alla öppna Components/Pages/Counter.razor och ändra knapptexten. Verifiera att hot reload tar — om inte, fela.
Lägg till en ny sida Hello.razor med @page "/hello" och en h1.
Visa Components/Pages/Home.razor och förklara att den körs som Static SSR (ingen @rendermode). Ändra något, demonstrera att klick inte fungerar utan rendermode.

För dem som blir snabbt klara

Bygg en sida som listar dagens datum och tid, uppdaterad varje sekund med en Timer.
Experimentera med att byta @rendermode mellan Server och WebAssembly.

För dem som behöver stöd

Förbered en backup-VM med .NET 10 SDK och VS Code installerat.
Para deltagare med olika takt — det blir bra peer-learning.
Installation av Visual Studio kan ta tid — VS Code räcker för kursen.

Vanliga frågor

Är Blazor "riktigt" produktionsfärdigt?

Ja. Microsoft kör det internt och flera stora .NET-aktörer (Stack Overflow, Microsoft Teams admin) använder Blazor. Det är inget experiment längre.

Måste man kunna JavaScript?

Nej, för 95% av jobbet. Men för avancerade scenarier (charting-bibliotek, kalenderwidgets) kan JS-interop behövas. Vi nuddar inte det i denna kurs.

Vad är skillnaden mot Razor Pages?

Razor Pages är server-renderade sidor med en page-modell — ingen interaktivitet utan post-back. Blazor lägger till komponenter och interaktivitet via SignalR (Server) eller WASM.

Vad händer om jag inte har Visual Studio?

VS Code med C# Dev Kit fungerar utmärkt för hela kursen. JetBrains Rider är också ett bra val.

Hemuppgift att kommunicera tydligt Slutför soloprojekt 1 (kursportföljen) före L2. Det ska finnas i ett Git-repo som de fortsätter på under hela kursen.

Förberedelse till nästa lektion Inga särskilda förberedelser — fortsätt på samma projekt. Be studenterna titta på första modulen av Blazor Fundamentals på Pluralsight innan L2 om de hinner.

Nästa: L2 — Razor-komponenter →