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 cuenta con:
Soporte del instructor
Videos en Full HD
Certificado de Finalización

Garantía de Reembolso
Contenido del Curso
Disponible en
días
días
después de inscribirte
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)
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)
Disponible en
días
días
después de inscribirte
Disponible en
días
días
después de inscribirte
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)
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)
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)
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)
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)
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)
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)
Disponible en
días
días
después de inscribirte