Tutorial de dotnet y Blazor

¡Bienvenido al tutorial de dotnet y Blazor! En este tutorial, vamos a aprender todo lo que necesitas saber para comenzar a trabajar con la plataforma .NET y el framework Blazor.

¿Qué es .NET?

.NET es una plataforma de desarrollo de software creada por Microsoft que permite a los desarrolladores crear aplicaciones para Windows, macOS y Linux. Con dotnet, los desarrolladores pueden utilizar múltiples lenguajes de programación, incluyendo C#, F#, VB.NET, y más recientemente, Rust y TypeScript.

.NET está dividido en dos componentes principales: el Framework .NET y .NET Core. El Framework .NET es una versión más antigua de la plataforma, que se ejecuta solo en Windows, mientras que .NET Core es una versión más moderna que se puede ejecutar en múltiples sistemas operativos.

¿Qué es Blazor?

Blazor es un framework de aplicaciones web desarrollado por Microsoft que permite a los desarrolladores crear aplicaciones web interactivas utilizando C# y Razor. Este se ejecuta en el navegador utilizando WebAssembly, lo que significa que no se necesita JavaScript para ejecutar la aplicación. También se puede ejecutar en el servidor, lo que lo hace ideal para aplicaciones web de alto rendimiento.

Instalando .NET y Blazor

Para comenzar, necesitarás descargar e instalar .NET Core SDK. Puedes descargar la última versión de .NET Core SDK desde el sitio web de Microsoft.

Una vez que hayas instalado .NET Core SDK, podrás crear proyectos de Blazor utilizando la CLI de .NET.

Para crear un nuevo proyecto de Blazor, abre una terminal y escribe el siguiente comando:

dotnet new blazorwasm -n MiProyecto

Este comando creará un nuevo proyecto de Blazor con el nombre MiProyecto. Para ejecutar el proyecto, navega a la carpeta del proyecto y escribe el siguiente comando:

dotnet run

Una vez que se ejecute el comando, podrás ver la aplicación de Blazor en tu navegador web en https://localhost:5001.

Creando una aplicación de Blazor

Ahora que hemos instalado .NET y creado un nuevo proyecto de Blazor, es hora de crear nuestra primera aplicación de Blazor.

Creando un componente de Blazor

Los componentes son la unidad básica de una aplicación de Blazor. Un componente es una clase de C# que define una parte de la interfaz de usuario de la aplicación. Los componentes se pueden anidar entre sí para formar una aplicación web completa.

Para crear un nuevo componente, navega a la carpeta Pages en el proyecto de Blazor y crea un nuevo archivo con el siguiente nombre: MiComponente.razor.

Abre el archivo MiComponente.razor y escribe el siguiente código:

<h1>¡Hola, mundo!</h1>

Este código define un componente que muestra el mensaje «¡Hola, mundo!» en la pantalla.

Usando el componente en una página de Blazor

Ahora que hemos creado un componente, podemos usarlo en una página de Blazor.

Abre el archivo Index.razor en la carpeta Pages y agrega el siguiente código:

@page "/"
@using MiProyecto.Pages

<h1>Bienvenido a mi aplicación de Blazor</h1>

<MiComponente />

Este código define una página de Blazor que muestra el mensaje «Bienvenido a mi aplicación de Blazor» y utiliza el componente MiComponente que hemos creado anteriormente.

Agregando interactividad al componente

Uno de los puntos fuertes de Blazor es que permite agregar interactividad a los componentes utilizando C#. En este ejemplo, agregaremos un botón al componente MiComponente que cambiará el mensaje que se muestra en la pantalla.

Abre el archivo MiComponente.razor y agrega el siguiente código después del mensaje «¡Hola, mundo!»:

<p>@mensaje</p>
<button @onclick="CambiarMensaje">Cambiar mensaje</button>

Este código define un botón que se llama Cambiar mensaje y una etiqueta p que muestra el mensaje actual.

Ahora, agrega el siguiente código C# al final del archivo MiComponente.razor:

@code {
    string mensaje = "¡Hola, mundo!";

    void CambiarMensaje() {
        mensaje = "¡Bienvenido a mi aplicación de Blazor!";
    }
}

Este código define una variable mensaje que se utiliza para almacenar el mensaje que se muestra en la pantalla. También define un método CambiarMensaje que cambia el valor de la variable mensaje cuando se hace clic en el botón.

¡Eso es todo! Ahora hemos agregado interactividad al componente MiComponente utilizando C#.

Conclusiones

En este tutorial, hemos aprendido cómo instalar .NET y Blazor, cómo crear un nuevo proyecto de Blazor y cómo crear un componente de Blazor. También hemos agregado interactividad al componente utilizando C#.

.NET y Blazor son herramientas poderosas para desarrolladores de software. Esperamos que este tutorial te haya dado una idea de lo que es posible con estas herramientas y te haya inspirado para seguir aprendiendo. ¡Buena suerte en tu viaje de programación!

The Digital Mike