Blazor od podstaw: Rozdział 2 — Twoja pierwsza aplikacja Blazor

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

Witaj w rozdziale 2 serii Blazor od podstaw. Jeśli ominąłeś rozdział 1, przeczytaj go najpierw.

W tym rozdziale stworzymy nową aplikację Blazor, uruchomimy ją lokalnie i zrozumiemy rolę najważniejszych plików.

Krok 1: Utwórz projekt

W terminalu:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

To utworzy aplikację Blazor Web App w .NET 9 z domyślną strukturą.

Jeśli narzędzie pyta o model interaktywności, zacznij od Interactive Server.

Krok 2: Uruchom lokalnie

Uruchom aplikację:

dotnet watch

Następnie otwórz adres z terminala (zwykle https://localhost:5xxx). Powinieneś zobaczyć domyślną aplikację z Home, Counter i Weather.

Jeśli to działa, środowisko jest gotowe.

Krok 3: Zrozum strukturę projektu

Na początku poznaj te pliki i foldery:

  • Program.cs — rejestruje serwisy i konfiguruje pipeline HTTP.
  • Components/App.razor — komponent główny aplikacji.
  • Components/Routes.razor — mapowanie tras.
  • Components/Pages/ — strony routowalne, np. Home i Counter.
  • Components/Layout/ — współdzielony layout (MainLayout.razor, menu).
  • wwwroot/ — zasoby statyczne (CSS, obrazy, favicon).
  • appsettings.json — wartości konfiguracji.

Nie musisz jeszcze rozumieć wszystkiego. Na tym etapie wystarczy wiedzieć, gdzie jest UI i gdzie konfigurujesz start aplikacji.

Krok 4: Wprowadź pierwszą zmianę

Otwórz Components/Pages/Home.razor i podmień zawartość na:

@page "/"

<PageTitle>Blazor od podstaw</PageTitle>

<h1>Blazor od podstaw</h1>
<p>Rozdział 2 działa lokalnie.</p>

Zapisz plik i odśwież przeglądarkę. Dzięki dotnet watch zmiana pojawi się od razu.

To potwierdza pełną pętlę: edycja -> build -> render.

Krok 5: Przeczytaj Program.cs raz

Nie musisz go zapamiętywać, ale rozpoznawaj kluczowe linie:

  • AddRazorComponents() włącza komponenty Razor.
  • AddInteractiveServerComponents() włącza interaktywne komponenty serwerowe.
  • MapRazorComponents<App>() mapuje komponent główny na endpointy.

Te linie pokazują, jak aplikacja startuje i jakie możliwości renderowania są aktywne.

Typowe problemy

Jeśli coś nie działa, zwykle chodzi o jedną z tych rzeczy:

  • Stary SDK: uruchom dotnet --version i sprawdź .NET 9.
  • Certyfikat HTTPS: uruchom dotnet dev-certs https --trust.
  • Konflikt portu: zatrzymaj stare procesy dotnet i uruchom ponownie.

Co dalej

W rozdziale 3 skupimy się na komponentach: parametrach, kompozycji i strukturze wielokrotnego użytku.