Estructura de componentes y arquitectura en Blazor

Clase 7 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase anteriorSiguiente clase

Juan David Forero

student•

Recuerda que la estructura para los componentes dentro de los archivos .razor son:

@page : Ruta por donde va a ser accedido el componente.
<PageTitle> : Titulo de la pagina que aparece en el navegador.
El contenido del html : Estructura para la pagina.
@code{ } : Para escribir código C#, es el identificador para cuando se compile la aplicación; para dar notación que se refiere a C#.

Erick Estrada Mancilla

student•

Estructura de componentes y arquitectura en Blazor

program.cs: Estructura general para ejecutar el proyecto y configuracion de los servicios/dependencias
.csproj: informacion de las versiones y configuraciones del lenguaje
app.razor: (no se modifica. este se extiende en automatico
imports.razor: son las declaraciones de los @using, estos se exponen para todos los componentes
wwwroot: es donde se encuentran los archivos staticos como css, html, imagenes, etc.
solo hay un index: ya que blazor es un SPA Single Page Application.
Shared: componentes que se utilizaran para otros componentes
Pages: es donde se colocan los componentes.

Carlos Arturo Pimentel

student•

La estructura de los componentes en Blazor sigue un patrón muy similiar al de un componente de Svelte, se me asemeja más a Svelte que a react, al menos en la estructuración de los componentes.

JUAN SILVA

student•

Entre menos se parezca a react mejor

Ronald Ernesto Tejada Ríos

student•

Por qué entre menos se parezca a React mejor?

Andrés Cueva

student•

seria bueno verlo, pero en Visual studio 2022

Rodolfo Valencia Rodriguez

student•

una duda se que estan usando webassambly con c# .net, pero piensan sacar cursos de webassanbly de otros lenguajes como Java y que sean de otras iniciativas diferentes de .NET

Diego Alejandro Gil Rave

student•

Al día de hoy la carpeta Shared cambió el nombre a Layout

Javier Sain Osorno Aguirre

student•

Sección donde se va escribir todo el código de C# del componente.

Jairo Alonso Contreras Mateus

student•

Muy buena tarde,

No encuentro en el proyecto el archivo blazorappdemo, estoy trabajando con visual studio, considero que es por eso que no lo veo.

Debería poder verlo?

Gabriel Querales Barillas

student•

Haces doble click ahí en el título del proyecto donde despliega los archivos y aparece inmediatamente.

Saludos.

edward.arroyave

student•

Me parece importante, ya que es un curso desde cero, explicar por qué se usan los archivos Razor. No es algo común para personas que vienen de otros frameworks, como Angular, entre otros.

Cesar Octavio Gonzalez

student•

cuando fue publicado este curso

Esteban Cerda Román

student•

Se publicó en enero, 2023.

No es un curso "viejo", con apenas 19 meses.

Estructura de componentes y arquitectura en Blazor

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre