Blazor vanaf nul: Hoofdstuk 2 — Je eerste Blazor-app

· 2 min lezen
Blazor .NET Web Development Series
Available in: Nederlands · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · 中文 · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia

Welkom bij hoofdstuk 2 van Blazor vanaf nul. Heb je hoofdstuk 1 gemist? Lees dat eerst zodat de renderingcontext nog vers is.

In dit hoofdstuk maken we een nieuwe Blazor-app, starten die lokaal en begrijpen wat de belangrijkste bestanden doen.

Stap 1: Project maken

In je terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Dit maakt een .NET 9 Blazor Web App met de standaardstructuur.

Als je tooling vraagt om een interactiviteitsmodel, begin met Interactive Server. Dat is de makkelijkste modus om mee te starten.

Stap 2: Lokaal draaien

Start de app:

dotnet watch

Open daarna de URL uit de terminal (meestal https://localhost:5xxx). Je zou de standaardapp met Home, Counter en Weather moeten zien.

Als dit werkt, is je omgeving klaar.

Stap 3: Projectstructuur begrijpen

Dit zijn de eerste bestanden en mappen die je moet kennen:

  • Program.cs — registreert services en configureert de HTTP-pipeline.
  • Components/App.razor — rootcomponent van de app.
  • Components/Routes.razor — routering voor pagina’s.
  • Components/Pages/ — routeerbare pagina’s zoals Home en Counter.
  • Components/Layout/ — gedeelde layout (MainLayout.razor, navigatie).
  • wwwroot/ — statische assets (CSS, afbeeldingen, favicon).
  • appsettings.json — configuratiewaarden.

Je hoeft nog niet alles te begrijpen. Voor nu is het genoeg te weten waar UI staat en waar startup gebeurt.

Stap 4: Je eerste wijziging

Open Components/Pages/Home.razor en vervang de inhoud door:

@page "/"

<PageTitle>Blazor vanaf nul</PageTitle>

<h1>Blazor vanaf nul</h1>
<p>Hoofdstuk 2 draait lokaal.</p>

Sla op en ververs de browser. Met dotnet watch wordt de app direct bijgewerkt.

Deze kleine wijziging bevestigt de volledige lus: bewerken -> bouwen -> renderen.

Stap 5: Lees Program.cs één keer

Je hoeft het niet uit je hoofd te leren, maar herken deze regels:

  • AddRazorComponents() zet Razor-componenten aan.
  • AddInteractiveServerComponents() zet interactieve servercomponenten aan.
  • MapRazorComponents<App>() koppelt de rootcomponent aan endpoints.

Deze regels laten zien hoe de app opstart en welke renderingmogelijkheden actief zijn.

Veelvoorkomende problemen

Als er iets faalt, is het meestal een van deze:

  • Oude SDK: draai dotnet --version en controleer .NET 9.
  • HTTPS-certificaat: draai dotnet dev-certs https --trust.
  • Poortconflict: stop oude dotnet-processen en start opnieuw.

Volgende hoofdstuk

In hoofdstuk 3 duiken we dieper in componenten: parameters, compositie en herbruikbare UI-structuur.