React JS Hooks: De Cero a Experto Creado Aplicaciones Reales
En este curso aprenderemos React Hooks, React Router, REDUX , Next JS, REST API, FETCH, Server Rendered y Static WebSite
Lo que aprenderás
¡Este curso hace parte de nuestro Pack Super Premium!
Tómalo con el resto de cursos de nuestra plataforma por sólo $9.99 usd mensuales
Más información
Todos nuestros cursos cuentan con:
Soporte del instructor
Videos en Full HD
Certificado de Finalización
Contenido del curso
Introducción
Disponible en
días
días
después de inscribirte
Instalaciones y configuraciones del entorno
Disponible en
días
días
después de inscribirte
-
Instalación del navegador
(2:00)
-
Instalando Editor de Código y Extensiones
(11:57)
-
Instalación de React Developer Tools para Google Chrome
(2:41)
-
Instalación de Node Js y NPM
(4:03)
-
Instalando YARN para el manejo de dependencias
(5:54)
-
Instalando iTerm2 - MacOS
(2:01)
-
Documentación oficial de React JS
(4:25)
-
Creando nuestra primera app en React JS
(8:32)
Conceptos básicos
Disponible en
días
días
después de inscribirte
-
¿Qué vamos hacer en esta sección?
(1:11)
-
Introducción a JSX
(3:21)
-
Conceptos básicos de React JS
(4:22)
-
Creando nuestra primera app en React JS
(2:53)
-
Estructura de React JS
(7:45)
-
Nuestro primer Componente en React JS
(11:27)
-
¿Que son los Props de React?
(3:57)
-
Pasando props básicos entre componentes
(8:55)
-
Pasando variables y objetos entre componentes por los props
(6:07)
-
Pasando funciones entre componente por los props
(6:30)
-
Props por defecto
(2:11)
-
Template Strings
(3:15)
-
Usando React Developer Tools
(5:03)
Añadiendo estilos CSS y SCSS
Disponible en
días
días
después de inscribirte
Conocimiento avanzados
Disponible en
días
días
después de inscribirte
Children Layout
Disponible en
días
días
después de inscribirte
-
¿Qué vamos hacer en esta sección?
(1:19)
-
¿Qué son los Hooks y qué sustituyen?
(4:24)
-
useState - ¿Que es y para que se usa?
(2:19)
-
useState - Creando estados en nuestros componentes
(13:37)
-
useState - Creando estados de tipo objetos
(9:14)
-
useEffect - ¿Qué es y para qué se usa?
(4:37)
-
useEffect - Ejemplo de uso
(3:25)
PROYECTO: Simulador de Tweets
Disponible en
días
días
después de inscribirte
-
Resultado final de la aplicación
(2:34)
-
Creando el proyecto de React JS
(3:47)
-
Instalando las Dependencias
(4:38)
-
Creando el componente Header y los estilos
(10:56)
-
Creando el componente SendTweet y posicionando el botón de abrir el modal
(8:06)
-
Crearemos el componente ModalContainer y le pasaremos el contenido del modal
(10:52)
-
Creando FormSendTweet para renderizar el formulario de envío de tweets
(11:47)
-
Escribiendo logica para enviar el Tweet y guardarlo en el localStorage
(15:39)
-
Añadiendo Toast para notificar al usuario si el Tweet se ha enviado
(5:40)
-
Recuperando Tweets del localStorage y actualizándolos con el nuevo tweet
(6:15)
-
Componente para mostrar todos la lista de Tweets enviados
(11:02)
-
Componente Tweet que pintara el tweet
(10:25)
-
Función para borrar Tweets
(8:55)
-
Código fuente del proyecto
(1:18)
PROYECTO: Web de Peliculas
Disponible en
días
días
después de inscribirte
-
Resultado final de la aplicación
(3:57)
-
Creando una cuenta en TheMovieDb
(6:05)
-
Creando el proyecto de React JS
(3:48)
-
Instalando las Dependencias
(6:40)
-
Creando todas las paginas de nuestra aplicación
(6:23)
-
Creando el sistema de rutas con React Router DOM
(12:12)
-
Creando el Menú y enlazando las páginas
(10:37)
-
Creando un Hooks personsonalizado useFetch para hace peticiones http
(8:58)
-
1/2 - Creando el componente SliderMovies para mostrar un slider de películas
(10:12)
-
2/2 - Creando el componente SliderMovies para mostrar un slider de películas
(13:19)
-
Componente Loading para mostrar un spinner mientras cargar
(4:27)
-
1/2 - Componente MovieList para mostrar una lista de películas
(10:54)
-
2/2 - Componente MovieList para mostrar una lista de películas
(9:06)
-
Reutilizando el Componente MovieList para mostrar otro tipo de peliculas
(3:08)
-
Componente Footer
(4:56)
-
Obteniendo los datos de la película que mandamos al componente movie
(12:58)
-
Añadiendo un fragmento de la película como background de nuestra página
(9:13)
-
Pintando la información de la película en nuestra página
(16:34)
-
Componente ModalVideo donde aparecerá el trailer de la película
(10:25)
-
Cargando trailer con el componente ReactPlayer
(10:25)
-
Estructura de la página Ultimos lanzamientos
(12:57)
-
Componente MovieCatlog para gestiona los datos de todas las películas
(8:10)
-
Componente MovieCard que renderizara el diseño de la película
(6:42)
-
Añadiendo paginación en últimos lanzamientos
(12:24)
-
Reutilizando componentes para montar la página de Películas Populares
(4:13)
-
1/3 - Creando la página para buscar películas
(9:14)
-
2/3 - Creando la página para buscar películas
(10:37)
-
3/3 - Creando la página para buscar películas
(8:11)
-
Maqueando la página de Error404
(5:50)
-
Código fuente del proyecto
(0:55)
PROYECTO: Carrito de un E-Commerce
Disponible en
días
días
después de inscribirte
-
Resultado final de la aplicación
(2:48)
-
Creando el proyecto de React JS
(2:54)
-
Instalando las dependencias y cambiando el comando yarn start
(7:59)
-
Creando el componente TopMenu
(15:35)
-
Dandole estilos con SASS al componente TopMenu
(3:02)
-
Creando base de datos de productos y subiéndola a api.myjson
(6:56)
-
Creando el hook useFetch para hacer peticiones HTTP
(9:22)
-
Creando el componente Products mostrando un loading o los productos por pantalla
(9:16)
-
Creando el componente Loading para mostrarlo cuando este cargando el contenido
(5:59)
-
Componente Product para mostrar el productos en la web
(15:37)
-
Logica para añadir productos al carrito
(12:52)
-
Toast para avisar al usuario que se ha añadido un producto al carrito
(6:00)
-
Recuperando productos del carrito al recargar la web
(4:58)
-
Creando el componente Cart
(10:45)
-
Función para abrir el carrito
(5:09)
-
Mostrando diferente icono si el carrito tiene productos o no
(7:09)
-
Creando el componente CartContentHeader
(9:58)
-
Añadiendo funcionalidad de cerrar el carrito y vaciar el carrito
(6:53)
-
Creando funciones reutilizables para tratar arrays
(4:45)
-
Creando componente interno CartContentProducts
(9:22)
-
Pintando los productos en el carrito
(18:29)
-
Añadiendo funcionalidad al botón de incrementar y decrementar producto
(6:38)
-
Creando el componente CartContentFooter
(6:45)
-
Hook para que la cantidad del carrito se actualize
(9:52)
-
Código fuente del proyecto
(1:17)
PROYECTO: Lista de tareas con React y Firebase
Disponible en
días
días
después de inscribirte
-
Resultado final de la aplicación
(3:35)
-
Código de la aplicación
(0:47)
-
Creando nuestra App de React JS
(3:06)
-
Creando y configurando la app de Firebase
(3:50)
-
Conectado Firebase con nuestra app de React JS
(5:26)
-
Instalando React Bootstrap
(2:34)
-
Añadiendo SASS al proyecto
(2:16)
-
Creando la cabecera de nuestra app
(3:42)
-
Estructura del listado de tareas
(6:34)
-
Componente AddTaska
(11:18)
-
Guardando el valor del formulario en un estado.
(3:14)
-
Guardando la tarea en firestore
(5:40)
-
Limpiando formulario al crear la tarea
(1:26)
-
Obteniendo todas las tareas de firestore
(12:16)
-
Creando una lista con todas las tareas
(5:41)
-
Dando diseño a la lista de tareas
(10:33)
-
Refrescando la lista cuando se añade una nueva tarea
(5:03)
-
Añadiendo aviso de lista vacía y loading
(8:27)
-
Funcionalidad para marcar tareas completada y desmarcarlas
(7:54)
-
Funcionalidad para eliminar tareas
(3:28)
NextJS: Creando App Server Rendered
Disponible en
días
días
después de inscribirte
-
¿Que es Next JS?
(3:01)
-
Creando nuestra primera App con Next.Js
(3:33)
-
Conociendo la estructura básica de Next.JS
(5:25)
-
Añadiendo CSS in JS, CSS Externo y SCSS Externo
(16:40)
-
Creando rutas básica y un menú de navegación
(8:34)
-
Creando sistema de rutas dinámicas
(10:36)
-
Moviéndonos de ruta con funciones y eventos
(3:46)
-
Usando getInitialProps
(3:46)
-
Realizando peticiones fetch a un API de películas con isomorphic-unfetch
(4:22)
-
Generando los estáticos y desplegando web en Netlify o otro servidor
(15:27)
-
Código fuente del proyecto
(0:57)
Redux: Introducción y Creando el Proyecto de Simulador de Tweets con REDUX
Disponible en
días
días
después de inscribirte
-
¿Qué vamos hacer en esta sección?
(1:33)
-
Creando un nuevo proyecto
(3:10)
-
Instalando todas las dependencias
(3:39)
-
Creando el Menu de nuestra app
(8:22)
-
Configurando REDUX en el proyecto e instalaremos Redux DevTools
(18:03)
-
Abriendo y cerrando el modal y actualizando el estado en el store
(18:44)
-
Creando el formulario de tweets y lo validaremos
(12:05)
-
Guardando el error del formulario en el store
(13:11)
-
Guardando el tweet en el store de Redux
(12:54)
-
Guardando los Tweets en el localStorage para no perderlos al recargar la pagina
(7:56)
-
Mostrando todos nuestros Tweets en pantalla
(7:35)
-
Eliminando Tweets
(6:00)
-
Código fuente del proyecto
(0:49)
Desplegar un proyecto de React terminado a producción
Disponible en
días
días
después de inscribirte