Blazor do Zero: Capítulo 2 — A tua primeira app Blazor

Bem-vindo ao Capítulo 2 de Blazor do Zero. Se perdeste o Capítulo 1, lê primeiro para manter o contexto dos modelos de renderização.

Neste capítulo vamos criar uma nova app Blazor, executá-la localmente e perceber o papel dos ficheiros principais.

Passo 1: Criar o projeto

No terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Isto cria uma Blazor Web App em .NET 9 com a estrutura padrão.

Se a tua ferramenta pedir um modelo de interatividade, começa por Interactive Server. É o modo mais simples para aprender.

Passo 2: Executar localmente

Inicia a app:

dotnet watch

Depois abre o URL mostrado no terminal (normalmente https://localhost:5xxx). Deves ver a app padrão com as páginas Home, Counter e Weather.

Se isto funcionar, o ambiente está pronto.

Passo 3: Entender a estrutura do projeto

Estes são os ficheiros e pastas mais importantes no início:

• Program.cs — regista serviços e configura o pipeline HTTP.
• Components/App.razor — componente raiz da aplicação.
• Components/Routes.razor — mapeamento de rotas.
• Components/Pages/ — páginas com rota como Home e Counter.
• Components/Layout/ — layout partilhado (MainLayout.razor, menu).
• wwwroot/ — recursos estáticos (CSS, imagens, favicon).
• appsettings.json — valores de configuração.

Não te preocupes em dominar tudo já. Nesta fase, basta saber onde vive a UI e onde o arranque é configurado.

Passo 4: Fazer a primeira alteração

Abre Components/Pages/Home.razor e substitui o conteúdo por:

@page "/"

<PageTitle>Blazor do Zero</PageTitle>

<h1>Blazor do Zero</h1>
<p>O Capítulo 2 está a correr localmente.</p>

Guarda e atualiza o browser. Com dotnet watch, a app deve atualizar de imediato.

Esta alteração simples confirma o ciclo completo: editar -> compilar -> renderizar.

Passo 5: Ler o Program.cs uma vez

Não precisas memorizar, mas deves reconhecer estas linhas:

• AddRazorComponents() ativa componentes Razor.
• AddInteractiveServerComponents() ativa componentes interativos no servidor.
• MapRazorComponents<App>() mapeia o componente raiz para endpoints.

Estas linhas mostram como a app arranca e quais capacidades de renderização estão ativas.

Problemas comuns

Se algo falhar, normalmente é um destes pontos:

• SDK antigo: corre dotnet --version e confirma .NET 9.
• Certificado HTTPS: corre dotnet dev-certs https --trust.
• Conflito de portas: termina processos dotnet antigos e volta a correr.

Próximo capítulo

No Capítulo 3 vamos aprofundar componentes: parâmetros, composição e organização de UI reutilizável.