Blazor с нуля: Глава 2 — Ваше первое приложение Blazor

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

Добро пожаловать в главу 2 Blazor с нуля. Если вы пропустили главу 1, сначала прочитайте ее, чтобы освежить контекст рендеринга.

В этой главе мы создадим новое приложение Blazor, запустим его локально и поймем, за что отвечают основные файлы.

Шаг 1: Создайте проект

В терминале:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Команда создаст Blazor Web App на .NET 9 со стандартной структурой.

Если инструмент предлагает выбрать модель интерактивности, начните с Interactive Server. Это самый простой режим для старта.

Шаг 2: Запустите локально

Запустите приложение:

dotnet watch

Откройте URL из терминала (обычно https://localhost:5xxx). Вы должны увидеть стандартное приложение со страницами Home, Counter и Weather.

Если все открылось, окружение настроено правильно.

Шаг 3: Разберитесь со структурой проекта

Сначала важно знать следующие файлы и папки:

  • Program.cs — регистрация сервисов и настройка HTTP-пайплайна.
  • Components/App.razor — корневой компонент приложения.
  • Components/Routes.razor — маршрутизация страниц.
  • Components/Pages/ — страницы с маршрутами (Home, Counter и т.д.).
  • Components/Layout/ — общий layout (MainLayout.razor, меню навигации).
  • wwwroot/ — статические ресурсы (CSS, изображения, favicon).
  • appsettings.json — значения конфигурации.

Пока не нужно понимать все файлы. На этом этапе достаточно знать, где находится UI и где настраивается запуск.

Шаг 4: Сделайте первое изменение

Откройте Components/Pages/Home.razor и замените содержимое на:

@page "/"

<PageTitle>Blazor с нуля</PageTitle>

<h1>Blazor с нуля</h1>
<p>Глава 2 запущена локально.</p>

Сохраните файл и обновите страницу. С dotnet watch изменения применяются сразу.

Это подтверждает полный цикл: изменить -> собрать -> отрисовать.

Шаг 5: Один раз прочитайте Program.cs

Не нужно заучивать, но важно узнавать ключевые строки:

  • AddRazorComponents() включает Razor-компоненты.
  • AddInteractiveServerComponents() включает интерактивные серверные компоненты.
  • MapRazorComponents<App>() сопоставляет корневой компонент с endpoint-ами.

Эти строки показывают, как приложение запускается и какие возможности рендеринга активны.

Частые проблемы

Если что-то не работает, обычно причина одна из этих:

  • Старый SDK: выполните dotnet --version и проверьте .NET 9.
  • Проблема с HTTPS-сертификатом: выполните dotnet dev-certs https --trust.
  • Конфликт портов: остановите старые процессы dotnet и запустите снова.

Что дальше

В главе 3 мы подробно разберем компоненты: параметры, композицию и структуру переиспользуемого UI.