Curso en línea
Desarrollando Aplicaciones en React 19 y ASP.NET Core 9
Utiliza React, ASP.NET Core, Entity Framework Core, Bootstrap, JWT, Leaflet, para crear una aplicación completa
Impartido por Felipe Gavilán
Detalles del curso
Información principal del curso
- Nivel
- Intermedio
- Duración aproximada
- 17 h 56 min
- Contenido
- 189 clases
- Actualizado
Herramientas que utilizarás
Tecnologías y versiones
- .NET Versión 9
- React Versión 19
Sobre este curso
Una ruta práctica y directa
Con ASP.NET Core podemos desarrollar Web APIs utilizando C#. Con React puedes crear aplicaciones web modernas que son flexibles. En este curso usaremos ambas herramientas para crear un proyecto. Haremos una aplicación con su base de datos, sistema de usuarios, back-end y UI, donde pondrás en práctica los conceptos aprendidos en el curso. Iremos paso a paso, tanto en el desarrollo del front-end con React, como con el back-end en ASP.NET Core. Puedes tomar este curso sin tener demasiados conocimientos de ambas tecnologías. De hecho, te enseño lo básico de estas tecnologías a lo largo del curso. Al final vamos a publicar nuestra aplicación de Reacty nuestra aplicación de ASP.NET Core. Algunos de los temas que veremos: - Desarrollo de Web APIs con ASP.NET Core - Base de datos en SQL Server utilizando Entity Framework Core - Sistema de usuarios con Json Web Tokens (JWT) - Desarrollo de una aplicación de página única (SPA) con React - Creación de formularios en React - Uso de React Hooks y creación de Hooks personalizados - Realizar peticiones HTTP desde React hacia ASP.NET Core usando Axios - Uso de componentes de componentes de terceros - Uso de mapas con leaflet - Guardar datos espaciales en una base de datos con NetTopologySuite - Permitir a los usuarios subir imágenes para ser guardadas en Azure Storage o localmente Al terminar este curso tendrás conocimientos suficientes para enfrentar retos de desarrollo que involucren aplicaciones de ASP.NET Core y React.
Contenido del curso
Currículo completo
10 secciones 189 clases
Sección 1 Introducción 14 clases
- Introducción Vista previa gratis
- ¿Qué es React? Vista previa gratis
- Introducción a ASP.NET Core Vista previa gratis
- Front-End vs Back-End Vista previa gratis
- ¿Qué es TypeScript? Vista previa gratis
- Instalando Node y NVM Vista previa gratis
- ¿Qué es Vite? Contenido restringido
- Instalando Visual Studio Contenido restringido
- Instalando .NET y VS Code Contenido restringido
- Instalando SQL Server Contenido restringido
- Creando la Aplicación de React Contenido restringido
- Creando el Web API con Visual Studio Contenido restringido
- Creando el Web API con Visual Studio Code Contenido restringido
- Resumen Contenido restringido
Sección 2 Repaso de JavaScript 15 clases
- Introducción Contenido restringido
- Creando el Proyecto Contenido restringido
- Módulos en JavaScript Contenido restringido
- Variables: let y const Contenido restringido
- Funciones Flecha Contenido restringido
- Plantillas de Cadenas (Template strings) Contenido restringido
- Operador Ternario Contenido restringido
- Literales de Objetos Mejorada Contenido restringido
- Destructurar Contenido restringido
- Operador Spread Contenido restringido
- Clases Contenido restringido
- Función map de Arreglos Contenido restringido
- Promesas y Async/Await (Programación Asíncrona) Contenido restringido
- Debugger Contenido restringido
- Resumen Contenido restringido
Sección 3 Primeros Pasos Con React 25 clases
- Introducción Contenido restringido
- Explorando Nuestro Proyecto Contenido restringido
- React vs HTML Contenido restringido
- Estudiando la Estructura de un Componente Contenido restringido
- Componentes Funcionales vs de Clases Contenido restringido
- Introducción a JSX Contenido restringido
- React.Fragment Contenido restringido
- Expresiones en JSX Contenido restringido
- CSS en React Contenido restringido
- Eventos en React Contenido restringido
- Estados y React Hooks Contenido restringido
- React Hooks: useState Contenido restringido
- Componente Hijo: Props Contenido restringido
- Pasando Contenido Como Parámetro Contenido restringido
- Mostrando Contenido de Manera Dinámica Contenido restringido
- Repitiendo Contenido usando Map Contenido restringido
- Comunicación Hijo a Padre Contenido restringido
- Introducción a useEffect Contenido restringido
- Ejemplo de useEffect Contenido restringido
- React Hooks: useContext Contenido restringido
- React Hooks: useMemo Contenido restringido
- Un Segundo Ejemplo de Memo Contenido restringido
- React Hooks: useCallback Contenido restringido
- Manejando Errores con Error Boundaries Contenido restringido
- Resumen Contenido restringido
Sección 4 Aplicando lo Aprendido en Nuestro Proyecto 9 clases
- Introducción Contenido restringido
- Limpieza Contenido restringido
- Mostrando una Película Contenido restringido
- Listado de Películas Contenido restringido
- Esperando el Listado de Películas Contenido restringido
- Listado Genérico Contenido restringido
- Componente Cargando Contenido restringido
- Instalando Bootstrap Contenido restringido
- Resumen Contenido restringido
Sección 5 Ruteo 9 clases
- Introducción Contenido restringido
- Creando el Componente de Menú Contenido restringido
- Utilizando React Router - Navegando con NavLinks Contenido restringido
- Guardando las Rutas en Otro Archivo Contenido restringido
- Creando Las Páginas del Proyecto Contenido restringido
- Navegando con JavaScript Contenido restringido
- Parámetros en la URL Contenido restringido
- Manejando Rutas no Encontradas Contenido restringido
- Resumen Contenido restringido
Sección 6 Formularios 20 clases
- Introducción Contenido restringido
- Creando Nuestro Primer Formulario Contenido restringido
- Validando con Yup Contenido restringido
- Deshabilitando el Botón Enviar Contenido restringido
- Validaciones Personalizadas con Yup Contenido restringido
- Editando Géneros Contenido restringido
- Componente de Filtro de Películas Contenido restringido
- Formulario de Actores Contenido restringido
- Validando Nuestro Formulario de Actores Contenido restringido
- Componente de Selección de Archivos Contenido restringido
- Formulario de Cines Contenido restringido
- Introducción a Leaflet Contenido restringido
- Integrando Leaflet a nuestro Formulario Contenido restringido
- Formulario de Películas Contenido restringido
- Componente de Selección Múltiple Contenido restringido
- Seleccionando Múltiples Cines Contenido restringido
- Creando el Componente de Typeahead Contenido restringido
- Seleccionando Múltiples Actores Contenido restringido
- Arrastrando Elementos Dentro de Una Lista Contenido restringido
- Resumen Contenido restringido
Sección 7 ASP.NET Core - Fundamentos 22 clases
- Introducción Contenido restringido
- Preparando un Repositorio de Pruebas Contenido restringido
- Controladores y Acciones Contenido restringido
- Métodos Post, Put y Delete Contenido restringido
- Recibiendo un Parámetro en una Acción Contenido restringido
- Reglas de Ruteo Contenido restringido
- Tipos de Datos de Retorno de una Acción Contenido restringido
- Programación Asíncrona Contenido restringido
- Introducción al Caché Contenido restringido
- Middlewares Contenido restringido
- Introducción al Model Binding Contenido restringido
- Validando Modelos Contenido restringido
- Otras Validaciones por Defecto Contenido restringido
- Validaciones Personalizadas - Por Atributo Contenido restringido
- Validaciones Personalizadas - En el Controlador Contenido restringido
- Inyección de Dependencias Contenido restringido
- Utilizando el Principio de Inversión de Dependencias Contenido restringido
- Tiempo de Vida de los Servicios Contenido restringido
- Usando un Singleton Para Nuestro Repositorio Contenido restringido
- Limpiando el Caché Contenido restringido
- Proveedores de Configuración Contenido restringido
- Resumen Contenido restringido
Sección 8 HTTP y Bases de Datos 54 clases
- Introducción Contenido restringido
- Limpiando el Back-End Contenido restringido
- Axios Contenido restringido
- CORS Contenido restringido
- Evitando Hardcodear la URL Contenido restringido
- Instalando EF Core Contenido restringido
- Creando la Base de Datos Contenido restringido
- Creando Géneros - Back-End Contenido restringido
- Creando Géneros - React Contenido restringido
- Mostrar Errores del Web API Contenido restringido
- DTOs Contenido restringido
- Índice de Géneros - Back-End Contenido restringido
- Índice de Géneros - React Contenido restringido
- Paginando - Back-End Contenido restringido
- Ordenando los Registros - Back-End Contenido restringido
- Paginando - React Contenido restringido
- Hook Personalizado Contenido restringido
- Editando Géneros - Back-End Contenido restringido
- Editando Géneros - React Contenido restringido
- Borrando Géneros - Back-End Contenido restringido
- Borrando Géneros - React Contenido restringido
- Entidad Actor Contenido restringido
- Creando Actores - React Contenido restringido
- Preparando el Terreno Para Salvar Imágenes Contenido restringido
- Salvando Imágenes en Azure Storage Contenido restringido
- Salvando Imágenes Localmente Contenido restringido
- Índice de Actores - Back-End Contenido restringido
- Índice de Actores - React Contenido restringido
- Editar Actores - Back-End Contenido restringido
- Editar Actores - React Contenido restringido
- Borrar Actores - Back-End Contenido restringido
- Borrar Actores - React Contenido restringido
- Componente Índice Entidad Contenido restringido
- Controlador Base - Obteniendo Entidades Paginadas Contenido restringido
- Controlador Base - Obteniendo una Entidad por su Id Contenido restringido
- Controlador Base - Crear, Actualizar y Borrar Contenido restringido
- Entidad Cines Contenido restringido
- CRUD Cines - Back-End Contenido restringido
- CRUD Cines - React Contenido restringido
- Entidad Películas Contenido restringido
- Creando Películas - Back-End Contenido restringido
- Custom Model Binding Contenido restringido
- Creando Películas - React Contenido restringido
- Terminando el Componente de Selección de Actores Contenido restringido
- Obteniendo Películas - Back-End Contenido restringido
- Landing Page - React Contenido restringido
- Editar Películas - Back-End Contenido restringido
- Editar Películas - React Contenido restringido
- Borrar Películas Contenido restringido
- Detalle Películas - React Contenido restringido
- Completando el Componente de Filtro de Películas - Back-End Contenido restringido
- Completando el Componente de Filtro de Películas - React Contenido restringido
- Simplificando Nuestro Componente de Filtro de Películas Contenido restringido
- Resumen Contenido restringido
Sección 9 Seguridad 17 clases
- Introducción Contenido restringido
- Autenticación y Autorización Contenido restringido
- Ocultar Contenido UI Contenido restringido
- Usando Nuestro Componente de Autorizado Contenido restringido
- Protegiendo Rutas Contenido restringido
- Configurando Identity Contenido restringido
- Configurando el Login y Registro en el back-end Contenido restringido
- Guardando el JWT Localmente Contenido restringido
- Construyendo los Componentes de Login y Registro Contenido restringido
- Construyendo el Sistema de Ratings - Back-End Contenido restringido
- Construyendo el Componente de Ratings - React Contenido restringido
- Interceptores el JWT a Nuestro Web API Contenido restringido
- Usando Claims - Back-End Contenido restringido
- Índice de Usuarios - Back-End Contenido restringido
- Índice de Usuarios - React Contenido restringido
- Política Personalizada de Cache Contenido restringido
- Resumen Contenido restringido
Sección 10 Despliegues 4 clases
- Introducción Contenido restringido
- Desplegando el Web API a un Azure App Service Contenido restringido
- Desplegando la App de React Contenido restringido
- Resumen Contenido restringido
Al finalizar, podrás…
Lo que aprenderás
- Construir Web APIs con ASP.NET Core
- Desarrollar Aplicaciones de Página Única con React
- Usar Entity Framework Core para trabajar con bases de datos
- Funcionalidad de login y registro
- Desplegar aplicaciones de ASP.NET Core y React
Aplica lo aprendido
Resultado práctico
Al finalizar este curso podrás realizar aplicaciones de React para el front-end y ASP.NET Core para el back-end.
Antes de comenzar
Requisitos previos
- Conocimiento básico de HTML, CSS y C#
¿Es para ti?
Este curso es para ti si…
- Programadores que quieren ser full-stack
- Programadores de .NET que quieren aprender React (y viceversa)