Curso rápido: .NET Blazor desde cero en 20 minutos 🚀

Introducción

Como desarrollador full stack e instructor técnico con más de 10 años de experiencia en tecnologías como .NET, React y WordPress, he visto cómo los frameworks evolucionan… y cómo Blazor se ha posicionado como una de las herramientas clave para el desarrollo web moderno en 2025.

Blazor permite usar C# en el navegador gracias a WebAssembly, eliminando la necesidad de JavaScript para muchas aplicaciones. Este curso rápido está diseñado para llevarte de cero a funcional en solo 20 minutos. Ideal si ya conoces C# o vienes del mundo ASP.NET.

¿Qué es Blazor?

Blazor es un framework de Microsoft que permite crear aplicaciones web interactivas del lado del cliente usando C# en lugar de JavaScript. Forma parte del ecosistema .NET y está disponible en dos versiones:

• Blazor Server: Ejecuta el código en el servidor, usando SignalR para actualizar el DOM.
• Blazor WebAssembly (WASM): Ejecuta todo en el navegador usando WebAssembly.

Ambas opciones comparten los mismos componentes Razor y lógica en C#.

¿Por qué Blazor es importante en 2025?

En 2025, Blazor ha evolucionado considerablemente:

• Compatibilidad con .NET 9 y C# 13.
• Integración nativa con MAUI y microservicios.
• Ideal para equipos C# que quieren evitar JavaScript sin sacrificar interactividad.
• Rendimiento WebAssembly mejorado con AOT (Ahead-of-Time Compilation).
• Soporte ampliado para componentes reutilizables y renderizado híbrido.

Además, con la creciente adopción de WebAssembly en herramientas como Figma, Canva o incluso juegos, Blazor se posiciona como una solución de futuro.

Paso a paso: Tu primera app Blazor en 20 minutos

1. Requisitos previos

• .NET 9 SDK
• Visual Studio 2022/2025 o VS Code
• Conocimientos básicos de C# y HTML

2. Crear el proyecto

dotnet new blazorwasm -n BlazorCurso20Min
cd BlazorCurso20Min
dotnet run

Esto crea una app Blazor WebAssembly básica. Accede a https://localhost:5001.

3. Estructura del proyecto

BlazorCurso20Min/
│
├── wwwroot/           → archivos estáticos
├── Pages/             → páginas Razor (.razor)
├── Shared/            → componentes compartidos
├── Program.cs         → configuración inicial
└── App.razor          → enrutador de componentes

4. Tu primer componente: ContadorAvanzado.razor

@code {
    private int valor = 0;

    void Incrementar() => valor += 2;
    void Reiniciar() => valor = 0;
}

<h3>Contador Avanzado</h3>

<p>Valor actual: <strong>@valor</strong></p>
<button class="btn btn-primary" @onclick="Incrementar">+2</button>
<button class="btn btn-danger" @onclick="Reiniciar">Reiniciar</button>

📌 Consejo: Los eventos en Blazor usan @onclick y están directamente enlazados a métodos en C#.

5. Navegación entre páginas

Edita App.razor para añadir tu nuevo componente al enrutador:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Página no encontrada</p>
    </NotFound>
</Router>

Y crea la ruta en Pages/ContadorAvanzado.razor:

@page "/contador-avanzado"

6.Consumir una API REST

@inject HttpClient Http

<h3>Frase del día</h3>

@if (frase == null)
{
    <p>Cargando...</p>
}
else
{
    <blockquote>@frase</blockquote>
}

@code {
    private string? frase;

    protected override async Task OnInitializedAsync()
    {
        frase = await Http.GetStringAsync("https://api.quotable.io/random");
    }
}

✅ Así se integran APIs externas sin escribir JavaScript.

Buenas prácticas

• Usa componentes reutilizables: DRY (Don’t Repeat Yourself).
• Aplica naming conventions claros: PascalCase para componentes.
• Separa lógica y presentación con archivos .razor.cs (Code Behind).
• Usa servicios inyectables (@inject) para desacoplar dependencias.
• Configura correctamente los entornos (Dev, Prod).

Errores comunes y cómo evitarlos

Error	Solución
❌ Error de navegación sin recarga	Usa NavLink en lugar de <a> para rutas internas
❌ Ciclo infinito en OnInitializedAsync	Usa condiciones o try/catch
❌ Llamadas a API bloqueantes	Siempre usa async/await
❌ Uso excesivo del StateHasChanged()	Solo cuando sea realmente necesario

Preguntas frecuentes (FAQs)

¿Qué diferencias hay entre Blazor Server y Blazor WASM?

• Server: Menor tamaño inicial, más rápido en dispositivos lentos.
• WASM: Más autónomo, ejecuta todo en el cliente.

¿Puedo usar JavaScript en Blazor?

Sí. Blazor permite interoperabilidad con JS mediante IJSRuntime.

¿Es Blazor una buena alternativa a React o Angular?

Depende. Si tu stack es C#/.NET, sí. Si ya usas TypeScript, puede no ser necesario.

Recursos recomendados

• Documentación oficial de Blazor
• Componentes Radzen para Blazor
• Blazor University (no oficial)