CursosEmpresasBlogLiveConfPrecios

Creando componentes compartidos

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

Contenido del curso

Introducción

  • 1
    Presentación

    Presentación

    01:55 min
  • 2
    Prerrequisitos

    Prerrequisitos

    02:06 min
  • 3
    ¿Qué es WebAssembly y Blazor?

    ¿Qué es WebAssembly y Blazor?

    09:34 min
  • 4
    Creando un proyecto de Blazor en Visual Studio

    Creando un proyecto de Blazor en Visual Studio

    06:42 min
  • 5
    Creando un proyecto de Blazor con el CLI

    Creando un proyecto de Blazor con el CLI

    05:14 min
  • 6
    Analizando extensiones de Visual code para blazor

    Analizando extensiones de Visual code para blazor

    03:12 min

Componentes de Blazor

  • 7
    Estructura de componentes y arquitectura en Blazor

    Estructura de componentes y arquitectura en Blazor

    07:48 min
  • 8
    Ciclo de vida en componentes y parámetros

    Ciclo de vida en componentes y parámetros

    15:33 min
  • 9
    Creando componentes compartidos

    Creando componentes compartidos

    Viendo ahora
  • 10
    Creando archivo de configuración

    Creando archivo de configuración

    07:08 min

Conectando Blazor a Backend

  • 11
    Configurando conexión al backend para el proyecto

    Configurando conexión al backend para el proyecto

    06:38 min
  • 12
    Creando componentes para conexión a la API

    Creando componentes para conexión a la API

    13:06 min
  • 13
    Mostrando lista de productos

    Mostrando lista de productos

    12:44 min
  • 14
    Creando Menú y CSS para la lista de productos

    Creando Menú y CSS para la lista de productos

    08:05 min
  • 15
    Creando formulario para agregar registros

    Creando formulario para agregar registros

    13:32 min
  • 16
    Integrando formulario con servicios

    Integrando formulario con servicios

    08:52 min

Usando Librerías de Blazor

  • 17
    Creando funcionalidad de eliminar usando JavaScript

    Creando funcionalidad de eliminar usando JavaScript

    12:24 min
  • 18
    Usando Librerías de Blazor

    Usando Librerías de Blazor

    11:28 min

Cierre

  • 19
    Conclusión y cierre

    Conclusión y cierre

    01:52 min
Tomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      Aron Eliezer Lopez Agurcia

      Aron Eliezer Lopez Agurcia

      student•
      hace 2 años
        Juan Carlos miranda

        Juan Carlos miranda

        student•
        hace 2 años
        Javier Eduardo Morón Mendoza

        Javier Eduardo Morón Mendoza

        student•
        hace 2 años
      Diego Alejandro Gentner Polanco

      Diego Alejandro Gentner Polanco

      student•
      hace 3 años
        Jesus David Mendez Coronell

        Jesus David Mendez Coronell

        student•
        hace 3 años
        Erick Estrada Mancilla

        Erick Estrada Mancilla

        student•
        hace 3 años
      Mateo Olaya Garzon

      Mateo Olaya Garzon

      student•
      hace un año
      Alvaro

      Alvaro

      student•
      hace 2 años
      Juan Daniel Diaz Jaramillo

      Juan Daniel Diaz Jaramillo

      student•
      hace 7 meses
      BALFRE VAZQUEZ CASTREJON

      BALFRE VAZQUEZ CASTREJON

      student•
      hace 3 años
        Miguel Teheran

        Miguel Teheran

        teacher•
        hace 3 años
      Joel Angel David Barrantes Palacios

      Joel Angel David Barrantes Palacios

      student•
      hace 2 años
      German Camilo Guarnizo Lizcano

      German Camilo Guarnizo Lizcano

      student•
      hace 2 años
        Rafael Humberto Rubiano Novoa

        Rafael Humberto Rubiano Novoa

        student•
        hace 2 años
      Roger Ullilen Echeverria

      Roger Ullilen Echeverria

      student•
      hace 8 meses
      JOSE CATAGUA

      JOSE CATAGUA

      student•
      hace 3 años
        Miguel Teheran

        Miguel Teheran

        teacher•
        hace 3 años
      Juan Betancur

      Juan Betancur

      student•
      hace 3 años
        Miguel Teheran

        Miguel Teheran

        teacher•
        hace 3 años
        ROMMEL DUAREZ SAENZ

        ROMMEL DUAREZ SAENZ

        student•
        hace 2 años
      Erick Fariñas

      Erick Fariñas

      student•
      hace un año
      Cristina Alejandra Morales Oñate

      Cristina Alejandra Morales Oñate

      student•
      hace un año
      Esteban Cerda Román

      Esteban Cerda Román

      student•
      hace 2 años

      Ahora que empiezo con el curso, veo que el proyecto utiliza net8.0, y en su estructura no aparece la carpeta "Shared".

      Para poder solucionarlo en efecto es necesario crear la carpeta y en cada archivo en la carpeta "Pages" se tiene que agregar

      @using {nombre aplicación}.{nombre archivo}

      Gracias por el aporte!

      Otra solución es, después de crear la carpeta /Shared también podemos agregar el @using {nombre aplicación}.Shared directamente en el archivo _Imports.razor lo que pondrá en el contexto de la aplicación todos los archivos que estén dentro de esa carpeta, de la misma manera que propone la estructura original con @using {nombre aplicación}.Layout

      Si a alguien está usando VS 2022 Community y el IDE no reconoce como declarado el componente ModuleTitle prueben reiniciando el IDE porque a veces se buguea el Intellisense. En mi caso incluso cambié el nombre pensando que era error del código, pero no es así.

      A mi me paso con VS Code y lo solucioné de la misma forma

      dotnet clean

      En versiones recientes de .Net la carpeta shared fue renombrada a Layouts para guardar componentes que están relacionados con el diseño o la estructura visual general de la aplicación (como menús de navegación específicos o barras laterales)

      Si los componentes que vas a crear son de uso general como en este caso, lo que debemos hacer es crear la carpeta Shared y guardar ahi dichos componentes

      Finalmente para que podamos usarlos en la aplicación, debemos modificar el archivo _Imports.razor y añadir la siguiente linea:

      @using BlazorApp.Shared

      En mi caso BlazorApp es el nombre de mi aplicación, debes reemplazarlo por el nombre de tu aplicación :)

      Entiendo que si la empresa te obliga a trabajar con blazor no te queda de otra. Pero, si puedes escoger prefiero hacer el cliente con React o angular o algo parecido.

      Para los que estan usando la versión 8.0 no les va a aparecer la carpeta "Shared" en este caso el nombre de ahora es "Layout"

      Estos componentes comparitdos deberian incluir estilos o solo html tags?

      Pueden tener sus propios estilos también.

      No me funcionaba lo del los titulo a pesar que descargue todos los archivos del github del profesor, asiq ue lo que hice fue lo siguiente:

      Moduletitle.razor

      ~~~

      @using System.ComponentModel.DataAnnotations

      <h2>@Title</h2> @code{    [Parameter]    [Required]    public string Title { get; set; }}

      ~~~

      y en la pages llamas al componente compartido como se hace ene l video:

      ~~~

      <ModuleTitle Title="Counter" />

      ~~~

      A mí no me traía la carpeta de shared, tuve que crearla y luego no me funcionaba el ModuleTitle, tuve que agregar la carpeta shared en el archivo _imports.razor

      A mi también me toco hacer ese paso:

      @using Blazorappdemo.Shared

      Luego reiniciar VSCode

      no se crea la carpeta Shared

      en el moduleTitle me sale: El elemento propiedad "Title" que no acepta valores NULL debe contener un valor distinto de NULL al salir del constructor. Considere la posibilidad de declarar el elemento propiedad como que admite un valor NULL.

      Si es un parametro requerido sale de esa manera. En las nuevas verions de C# string no acepta nulos por defecto.

      Todo me funciona muy bien pero no me pinta el componente en verde, ademas me sale con una advertencia. ¿como puedo hacer para que no salga la advertencia?

      Screenshot 2023-02-14 230115.png

      Hola Juan los warning salen en la cosola o depronto pasando el mouse por encima puedes ver de que se trata, tal vez algun aprametro requerido no se esta enviando o los espacios que tienes entre title y le mensaje también pueden afectar. De todas formas revisa la consola o pasa el mouse sobre el warning que seguro te dirá el por que

      no reconoce al componente

      Está muy interesante, me gusta que sigue más o menos la misma implementación de react, ha hecho menor la curva de aprendizaje para mí

      En Blazor, la carpeta Shared sigue existiendo en la versión 8.0, pero ahora también se utiliza una carpeta Layout para organizar los componentes de diseño. La carpeta Shared generalmente contiene componentes reutilizables que pueden ser utilizados en diferentes partes de la aplicación, mientras que la carpeta Layout se utiliza específicamente para componentes de diseño que definen la estructura general de la aplicación, como menús, encabezados y pies de página

      No logré que corriera con las diversas alternativas comentadas. Me funcionó, fue generar el ModuleTitle, dentro de Layout.