Blazor desde cero: Capítulo 2 — Tu primera app Blazor

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

Bienvenido al Capítulo 2 de Blazor desde cero. Si te perdiste el Capítulo 1, léelo primero para tener fresco el contexto de los modelos de renderizado.

En este capítulo vamos a crear una app Blazor nueva, ejecutarla en local y entender qué hace cada archivo importante.

Paso 1: Crear el proyecto

Desde tu terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Esto crea una Blazor Web App de .NET 9 con la estructura por defecto.

Si tu herramienta te pide elegir un modelo de interactividad, empieza con Servidor interactivo. Es el modo más fácil para aprender porque todo se ejecuta en el servidor y la configuración es más directa.

Paso 2: Ejecutarla en local

Inicia la app:

dotnet watch

Luego abre la URL que aparece en la terminal (normalmente https://localhost:5xxx). Deberías ver la app por defecto con las páginas Home, Counter y Weather.

Si esto funciona, tu entorno está listo.

Paso 3: Entender la estructura del proyecto

Estos son los archivos y carpetas que debes conocer primero:

  • Program.cs — registra servicios y configura el pipeline HTTP.
  • Components/App.razor — componente raíz de la aplicación.
  • Components/Routes.razor — mapeo de rutas para las páginas.
  • Components/Pages/ — páginas enrutable como Home y Counter.
  • Components/Layout/ — layout compartido (MainLayout.razor, menú de navegación).
  • wwwroot/ — recursos estáticos (CSS, imágenes, favicon).
  • appsettings.json — valores de configuración.

No te preocupes por cada archivo todavía. En esta fase basta con entender dónde vive la UI y dónde se configura el arranque.

Paso 4: Haz tu primer cambio

Abre Components/Pages/Home.razor y reemplaza el contenido por:

@page "/"

<PageTitle>Blazor desde cero</PageTitle>

<h1>Blazor desde cero</h1>
<p>El Capítulo 2 está ejecutándose en local.</p>

Guarda el archivo y refresca el navegador. Con dotnet watch, la app debería actualizarse al momento.

Este cambio pequeño confirma el ciclo completo: editar -> compilar -> renderizar.

Paso 5: Leer Program.cs una vez

No hace falta memorizarlo, pero sí reconocer estas líneas clave:

  • AddRazorComponents() habilita los componentes Razor.
  • AddInteractiveServerComponents() habilita componentes interactivos del lado servidor.
  • MapRazorComponents<App>() mapea el componente raíz a endpoints.

Estas líneas te dicen cómo arranca la app y qué capacidades de renderizado están activas.

Problemas comunes

Si algo falla, normalmente es uno de estos casos:

  • SDK antiguo: ejecuta dotnet --version y asegúrate de usar .NET 9.
  • Advertencias del certificado HTTPS: ejecuta dotnet dev-certs https --trust.
  • Conflictos de puerto: detén procesos dotnet viejos y vuelve a ejecutar.

Próxima entrega

En el Capítulo 3 nos centraremos en componentes a fondo: parámetros, composición y cómo estructurar UI reutilizable sin convertir el proyecto en un caos.