React JS Hooks: De Cero a Experto Creado Aplicaciones Reales
4.4 (172 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
796 students enrolled

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
4.4 (172 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
796 students enrolled
Last updated 5/2020
Spanish
Spanish [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 18.5 hours on-demand video
  • 1 article
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Crearemos nuestros proyectos Reales que te puedes encontrar en el mundo laboral.
  • React JS, la librería de Javascript más demandada en el mercado laboral actualmente.
  • Usaremos los Hooks de React, useState, useEffect, useRef, etc...
  • Crearemos nuestros propios Hooks.
  • Aprenderemos a consumir API REST.
  • Una nueva forma de trabajar más ordenada, limpia y declarativa por componentes.
  • Conocer todo lo que tiene React y lo que podemos hacer con esta tecnología.
  • Conocer qué es el State, Props, Tipos de Componentes en React y mucho más!
  • Utilizaremos React JS con otras tecnologías de JavaScript como LocalStorage.
  • Deployment de Aplicaciones en React de una manera muy rápida y sencilla.
  • Crearemos una web de React completamente con estáticos usando Next JS.
  • Escribiremos código React que siga las buenas prácticas.
  • Aprenderemos a usar Redux con un proyecto real, lo configuraremos desde cero.
  • Aprenderemos a usar NextJS para crear aplicaciones Server Rendered
  • Gracias a todo este contenido podremos conseguir trabajo como desarrollador ReactJS.
Course content
Expand all 164 lectures 18:35:07
+ Introducción
7 lectures 31:14

Crearemos un proyecto donde podemos enviar y eliminar tweets.

Preview 02:34

Conectaremos con una API de películas TheMovieDB y crearemos una web completa donde podremos obtener información de películas y buscar películas.

Preview 03:57

Crearemos una lista de tareas conectada a Firebase para poder obtener la información y poder usarla desde cualquier parte del mundo.

Preview 03:35
+ Instalaciones y configuraciones del entorno
8 lectures 41:33

Seleccionaremos el navegador que vamos a utilizar durante todo el curso.

Instalación del navegador
02:00

Instalaremos el Editor de Código Visual Studio Code y las Extensiones que vamos a utilizar.

Instalando Editor de Código y Extensiones
11:57

Vamos ha instalar una extension de Google Chrome llamara React Developer Tools que nos ayuda a identifica los componentes del DOM de un simple vistazo.

Instalación de React Developer Tools para Google Chrome
02:41

Instalaremos Node.js para poder luego crear Apps con React.

Instalación de Node Js y NPM
04:03

Instalaremos YARN para descargar todas las dependencias de terceros que usaremos en nuestros proyectos.

Instalando YARN para el manejo de dependencias
05:54

Usaremos el terminal iTerm 2 ya que te da muchas facilidades con la instalación de zsh.

Instalando iTerm2 - MacOS
02:01

Lo más importante antes de programar es saber cuál es la documentación donde tenemos que ir a resolver dudas y este caso Facebook nos da la documentación de React en español.

Documentación oficial de React JS
04:25

Vamos ha crear nuestra primera APP con React.

Creando nuestra primera app en React JS
08:32
+ Conceptos básicos
14 lectures 01:11:14

Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.

Preview 01:11

Veremos los conceptos básicos de React para poder entender que estamos programando en todo momento.

Preview 04:22

Crearemos nuestra primera app con el comando create-react-app.

Creando nuestra primera app en React JS
02:53

Veremos toda la estructura de una aplicación de React JS.

Estructura de React JS
07:45

Crearemos nuestro primer componente y veremos todas sus partes.

Nuestro primer Componente en React JS
11:27

Veremos una explicación de que son los PROPS de React y como funcionan.

¿Que son los Props de React?
03:57

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasando props básicos entre componentes
08:55

Pasaremos variables y objetos por los props de nuestros componentes.

Pasando variables y objetos entre componentes por los props
06:07

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Pasando funciones entre componente por los props
06:30

Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.

El uso de la Asignación por Destructuring
04:17

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Props por defecto
02:11

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Template Strings
03:15

Con React Developer Tools podremos ver en tiempo real que props tiene cada componente, que componentes son los padres y que hooks esta usando, entre muchas mas funcionalidades.

Usando React Developer Tools
05:03
+ Añadiendo estilos CSS y SCSS
6 lectures 27:34

Una explicación de todo lo que vamos a ver en esta sección de estilos CSS y SCSS en React JS.

Preview 02:11

Vamos a empezar aprendiendo como se añaden los IDs y las Classes cuando estamos escribiendo React JS.

Como añadir Clases y IDs en React JS
02:53

Veremos como podemos añadir estilos en linea en nuestros componente.

Estilos en linea
02:57

Veremos qué es CSSModule y por qué React JS lo recomienda en su pagina oficial.

CSSModules
06:12

Podemos añadir tanto CSS en linea como CSS en un fichero externo y incluirlo en nuestro componente con un import.

Añadir CSS en un fichero externo por componentes
06:47

Veremos la mejor forma de añadir SASS a nuestro proyecto de React JS y como potencia y facilita la escritura de CSS.

Añadir SASS en un fichero externo por componentes
06:34
+ Conocimiento avanzados
6 lectures 32:49

Una explicación de todo lo que vamos a ver en esta sección de Conocimientos avanzados.

Preview 01:35

Veremos qué son los PropTypes y por que son buenos utilizarlos para documentar los tipos de nuestros props en los componentes.

¿Qué son los PropTypes y para qué sirven?
02:33

Veremos qué tipo de validación de tipo tenemos para poder implementar con PropTypes ya sean String, Int, Funciones, Array, Objetos, etc...

Validaciones PropTypes
06:32

Hemos visto que podemos hacer Destructuring de los props pues ahora veremos como podemos hacer el doble Destructuring.

Props con Doble Destructuring
04:11

También podemos crear componentes internos dentro de un mismo componentes para estructura más nuestro componente y que sea más fácil de leer.

Componentes internos
11:40

Veremos qué es el Children de un componentes y como se puede utilizar para crear Layouts.

Children Layout
06:18
+ Los Hooks de React
7 lectures 38:55

Una explicación de todo lo que vamos a ver en esta sección de Hooks de React JS.

Preview 01:19

Una explicación de que son los Hooks y a quién sustituyen.

¿Qué son los Hooks y qué sustituyen?
04:24

Veremos como utilizar el Hooks useState para el uso de estados en componentes y actualizar esos estados

useState - ¿Que es y para que se usa?
02:19

Crearemos nuestro primero estado en nuestro componente y veremos como se mueve la información por le estado.

useState - Creando estados en nuestros componentes
13:37

Veremos como podemos complicar un poco más el estados y generaremos un estado que almacenara un objeto con varias propiedades.

useState - Creando estados de tipo objetos
09:14

Una explicación de que es el useEffect y como podemos utilizarlo para hacer que nuestros componentes sean reactivos.

useEffect - ¿Qué es y para qué se usa?
04:37

Crearemos un ejemplo de como se usuaria el useEffect en un componente.

useEffect - Ejemplo de uso
03:25
+ PROYECTO: Simulador de Tweets
14 lectures 01:51:54

Vamos ha ver el resultado final del proyecto.

Preview 02:34

Vamos a crear el proyecto base y hacer varios cambios para empezar a programar.

Creando el proyecto de React JS
03:47

Vamos a instalar todas las dependencias que usaremos en nuestro proyecto.

Instalando las Dependencias
04:38

Vamos a crear el componente Header para mostrar el logo y el nombre de nuestra aplicación.

Creando el componente Header y los estilos
10:56

Crearemos un botón flotante que abrirá un modal que contendrá el formulario para crear un nuevo Tweet.

Creando el componente SendTweet y posicionando el botón de abrir el modal
08:06

Vamos a crear el componente ModalContainer y le pasaremos por children el contenido que tiene que renderizar.

Crearemos el componente ModalContainer y le pasaremos el contenido del modal
10:52

Crearemos el componente FormSendTweet para renderizar el formulario para enviar los de tweets.

Creando FormSendTweet para renderizar el formulario de envío de tweets
11:47

Guardaremos el contenido del formulario en un estado y cuando se envíe el formulario lo guardaremos en un array en el localStorage

Escribiendo logica para enviar el Tweet y guardarlo en el localStorage
15:39

Crearemos un toast para avisar al usuario si el tweet que ha enviado si se ha enviado correctamente o ha surgido algún fallo en el proceso de envío.

Añadiendo Toast para notificar al usuario si el Tweet se ha enviado
05:40

Recuperaremos todos los Tweets que hemos enviado del localStorage y añadiremos el nuevo tweets que estamos intentando enviar.

Recuperando Tweets del localStorage y actualizándolos con el nuevo tweet
06:15

Crearemos un componente que renderizara la lista todos los tweets que tenemos guardados en el localStorage.

Componente para mostrar todos la lista de Tweets enviados
11:02

Crearemos un componente Tweets para renderizar en le navegador cada uno de los tweets enviados.

Componente Tweet que pintara el tweet
10:25

Crearemos una función para pode borrar cualquier Tweet.

Función para borrar Tweets
08:55

Dónde podrás encontrar el código fuente de este proyecto.

Código fuente del proyecto
01:18
+ PROYECTO: Web de Peliculas
30 lectures 04:18:19

Vamos ha ver el resultado final del proyecto.


Resultado final de la aplicación
03:57

Nos vamos a crear una cuenta en TheMovieDB para poder consumir tu API de películas.

Creando una cuenta en TheMovieDb
06:05

Vamos a crear el proyecto base y hacer varios cambios para empezar a programar.

Creando el proyecto de React JS
03:48

Vamos a instalar todas las dependencias que usaremos en nuestro proyecto.

Instalando las Dependencias
06:40

Crearemos todas la páginas que va a tener nuestra aplicación para poder configurar el sistema de rutas en la siguiente clase.

Creando todas las paginas de nuestra aplicación
06:23

Crearemos el sistema de rutas con React Router DOM para poder navegar entre nuestra páginas sin recargar la web.

Creando el sistema de rutas con React Router DOM
12:12

Crearemos el menú e la web y enlazaremos todas  las paginas a las opciones del menú para poder navegar entre páginas.

Creando el Menú y enlazando las páginas
10:37

Crearemos nuestro propio hooks llamado useFetch para hacer peticiones HTTP a TheMovieDB y que nos devuelva el loading, el errro y el resultado.

Creando un Hooks personsonalizado useFetch para hace peticiones http
08:58

Crearemos un componente que renderize un slider/carrousel de todas las películas que le enviemos.

1/2 - Creando el componente SliderMovies para mostrar un slider de películas
10:12

Crearemos un componente que renderize un slider/carrousel de todas las películas que le enviemos.

2/2 - Creando el componente SliderMovies para mostrar un slider de películas
13:19

Crearemos un componente con un spinner para mostrar mientras se ejecutan las peticiones HTTP.

Componente Loading para mostrar un spinner mientras cargar
04:27

Crearemos el componente MovieList y lo reutilizaremos para crear una lista de películas  populares.

1/2 - Componente MovieList para mostrar una lista de películas
10:54

Crearemos el componente MovieList y lo reutilizaremos para crear una lista de películas  populares.

2/2 - Componente MovieList para mostrar una lista de películas
09:06

Reutilizaremos el componente MovieList para renderizar otra listas de películas pero esta vez de las películas mejor votadas por por usuarios.

Reutilizando el Componente MovieList para mostrar otro tipo de peliculas
03:08

Crearemos el componente Footer para mostrar nuestro nombre en el pie de la página.

Componente Footer
04:56

Recogeremos el ID de la película que mandamos al componente movie y obtendremos toda la información de la película.

Obteniendo los datos de la película que mandamos al componente movie
12:58

Obtendremos una imagen de un fragmento de la película y la pondremos como background de la página.

Añadiendo un fragmento de la película como background de nuestra página
09:13

Recuperaremos toda la información que necesitemos de la película para mostrar en nuestra página.

Pintando la información de la película en nuestra página
16:34

Crearemos un componente ModalVideo para poder reproducir un video o trailer.

Componente ModalVideo donde aparecerá el trailer de la película
15:14

Usaremos el componente ReactPlayer para mostrar el trailer de la película dentro del modal.

Cargando trailer con el componente ReactPlayer
10:25

Crearemos la estructura que va a tener nuestra página de Ultimos lanzamientos.

Estructura de la página Ultimos lanzamientos
12:57

Crearemos un componente que manejara los datos de cada película.

Componente MovieCatlog para gestiona los datos de todas las películas
08:10

Crearemos un componente que renderizara el diseño de cada película.

Componente MovieCard que renderizara el diseño de la película
06:42

Crearemos una paginación de películas sin que se tenga que recargar la página.

Añadiendo paginación en últimos lanzamientos
12:24

Vamos a reutilizar componentes que ya hemos creado para crear una nueva pagina con con otro tipo de películas.

Reutilizando componentes para montar la página de Películas Populares
04:13

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

1/3 - Creando la página para buscar películas
09:14

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

2/3 - Creando la página para buscar películas
10:37

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

3/3 - Creando la página para buscar películas
08:11

Vamos a darle un diseño atractivo a la página de error404.

Maqueando la página de Error404
05:50

Dónde podrás encontrar el código fuente de este proyecto.

Código fuente del proyecto
00:55
+ PROYECTO: Carrito de un E-Commerce
25 lectures 03:20:20

Veremos el ejemplo final del proyecto que vamos a realizar en esta sección.

Resultado final de la aplicación
02:48

Crearemos el proyecto desde donde partiremos.

Creando el proyecto de React JS
02:54

Instalaremos todas las dependencias que vamos a usar en el proyecto y cambiaremos el comando de ejecución de la app en el package.json.

Instalando las dependencias y cambiando el comando yarn start
07:59

Vamos a crear un componente que renderize el menu de nuestra web.

Creando el componente TopMenu
15:35

Le daremos los estilos necesarios a nuestro menu para que se vea bonito con SASS.

Dandole estilos con SASS al componente TopMenu
03:02

Vamos a construir nuestra base de datos de productos y lo subiremos a myJson para generar una URL y luego poder hacer peticiones HTTP para recuperar esos productos.

Creando base de datos de productos y subiéndola a api.myjson
06:56

Vamos a crear un Hook personalizado llamado useFetch para realizar petición HTTP y que nos devuelva un loading, el resultado y el error si fuera necesario.

Creando el hook useFetch para hacer peticiones HTTP
09:22

Crearemos el componente Products para gestionar los datos de todos los productos y luego renderizar un nuevo componente.

Creando el componente Products mostrando un loading o los productos por pantalla
09:16

Crearemos un componente Loading para mostrarlo cuando hagamos una petición HTTP y este en curso.

Creando el componente Loading para mostrarlo cuando este cargando el contenido
05:59

Crearemos el componente Product para renderizar el producto ya en la web donde le pasemos los datos de cada productos por props.

Componente Product para mostrar el productos en la web
15:37

Escribiremos la logia en JavaScript para poder añadir productos al carrito.

Logica para añadir productos al carrito
12:52

Añadiremos un Toast para poder mandar feedback al usuario de lo que ha sucedido.

Toast para avisar al usuario que se ha añadido un producto al carrito
06:00

Recuperaremos los productos del carrito cuando nuestra pagina web sea recargada y así no perderemos nunca los productos añadidos al carrito.

Recuperando productos del carrito al recargar la web
04:58

Crearemos el componentes Cart donde ira todos el carrito de nuestra página web.

Creando el componente Cart
10:45

Escribiremos la lógica que necesitamos para que nuestro carrito se abra y se cierre haciendo click en el icono.

Función para abrir el carrito
05:09

Cambiaremos el icono cuando el carrito tenga productos o cuando el carrito esta vacío.

Mostrando diferente icono si el carrito tiene productos o no
07:09

Crearemos el componte CartContentHeader donde estaba para cerrar el carrito, el titulo de carrito y para vaciar al carrito.

Creando el componente CartContentHeader
09:58

Añadiremos la funcionalidad de para poder cerrar el carrito y vaciar el carrito de todos los productos que contenga.

Añadiendo funcionalidad de cerrar el carrito y vaciar el carrito
06:53

Crearemos funciones para controlar Arrays que luego reutilizaremos en otros componentes.

Creando funciones reutilizables para tratar arrays
04:45

Crearemos el componente interno CartContentProducto que renderizara todos los productos del carrito.

Creando componente interno CartContentProducts
09:22

Escribiremos el código para que los producto del carrito se vean correctamente en la web.

Pintando los productos en el carrito
18:29

Añadiremos la funcionalidad al botón de (+) y (-) de cada productos para poder incrementar y decrementar la cantidad de ese producto que hay en el carrito.

Añadiendo funcionalidad al botón de incrementar y decrementar producto
06:38

Crearemos el componente CartContentFooter donde añadiremos el total del precio del carrito y botón para proceder al pago del carrito.

Creando el componente CartContentFooter
06:45

Crearemos un Hooks para que la cantidad total del carrito se pueda actualizar instantaneamente.

Hook para que la cantidad del carrito se actualize
09:52

Dónde podrás encontrar el código fuente de este proyecto.

Código fuente del proyecto
01:17
+ PROYECTO: Lista de tareas con React y Firebase
20 lectures 01:46:51

Veremos el resultado final de nuestra aplicación.

Preview 03:35

Donde puedes obtener el código de la aplicación terminada.

Código de la aplicación
00:47

Vamos a crear un proyecto de React JS y a modificarlo para nuestra App.

Creando nuestra App de React JS
03:06

Vamos a crear nuestra App en Firebase y a añadir las configuraciones necesarias

Creando y configurando la app de Firebase
03:50

Vamos a conectar la app de Firebase que acabamos de crear con nuestra app de React JS.

Conectado Firebase con nuestra app de React JS
05:26

Instalando React Bootstrap y añadiéndolo al propyecto de React.

Instalando React Bootstrap
02:34

Añadiendo SASS al proyecto.

Añadiendo SASS al proyecto
02:17

Vamos a crear la cabecera de nuestra app con nuestro nombre.

Creando la cabecera de nuestra app
03:42

Vamos a montar la estructura del listado de tareas.

Estructura del listado de tareas
06:34

Creando el componente AddTask para poder crear tareas.

Componente AddTaska
11:18

Vamos a guardar el valor del formulario en un estado para luego mandarlo a Firebase.

Guardando el valor del formulario en un estado.
03:14

Mandaremos la tarea a firestore para guardarla.

Guardando la tarea en firestore
05:40

Vamos a limpiar el formulario cuando la tarea se haya creado en firestore.

Limpiando formulario al crear la tarea
01:26

Vamos a crear una petición para obtener todas las tareas de firestore y las guardaremos en un estado.

Obteniendo todas las tareas de firestore
12:16

Vamos a usar el estado donde tenemos todas las tareas y las pintaremos en nuestra app.

Creando una lista con todas las tareas
05:41

Vamos a darle un poco de diseño a la lista de tareas y añadiremos los iconos de Check y Delete.

Dando diseño a la lista de tareas
10:33

Vamos a refrescar la lista de tareas cuando el usuario crea una nueva sin tener que recargar la página.

Refrescando la lista cuando se añade una nueva tarea
05:03

Vamos a mostrar al usuario un feedback cuando la lista este vacía o este cargando las tareas.

Añadiendo aviso de lista vacía y loading
08:27

Vamos a añadir la funcionalidad para actualizar cualquier tarea y márcala como completa o incompleta.

Funcionalidad para marcar tareas completada y desmarcarlas
07:54

Vamos a añadir la funcionalidad para eliminar cualquier tarea.

Funcionalidad para eliminar tareas
03:28
Requirements
  • Conocimientos básicos de JavaScript, HTML y CSS.
  • Muchas ganas de aprender.
Description

Gracias a este curso aprenderás desde los conceptos básicos de React JS, hasta lo más avanzado para crear páginas webs completas desde cero.

Una vez terminado el curso serás capaz de crear cualquier tipo de aplicación web SPA conectada a una API de datos sin necesidad de ayuda.

Aprenderemos desde las bases de React JS y crearemos poderosas páginas webs que consuman APIs de terceros sin dificultad.

También vamos a aprender a crear aplicaciones web con Next.JS para hacer webs Server Rendered y aprenderemos a usar REDUX con React JS.


¿QUE APRENDEREMOS?

  • Crearemos nuestros proyectos Reales que te puedes encontrar en el mundo laboral.

  • React JS, la librería de Javascript más demandada en el mercado laboral actualmente.

  • Usaremos los Hooks de React, useState, useEffect, useRef, etc...

  • Crearemos nuestros propios Hooks.

  • Aprenderemos a consumir API REST.

  • Una nueva forma de trabajar más ordenada, limpia y declarativa por componentes.

  • Conocer todo lo que tiene React y lo que podemos hacer con el.

  • ¡Conocer qué es el State, Props, Tipos de Componentes en React y mucho más!

  • Utilizaremos React JS con otras tecnologías de JavaScript como LocalStorage.

  • Deployment de Aplicaciones en React de una manera muy rápida y sencilla.

  • Crearemos una web de React completamente con estáticos usando Next JS.

  • Escribiremos código React que siga las buenas prácticas.

  • Aprenderemos a usar Redux con un proyecto real, lo configuraremos desde cero.

  • Aprenderemos a usar NextJS para crear aplicaciones Server Rendered.

  • Gracias a todo este contenido podras conseguir trabajo como desarrollador ReactJS.

Who this course is for:
  • Desarrolladores de JavaScript
  • Desarrolladores de React JS
  • Desarrolladores de Angular
  • Desarrolladores de Vue
  • Desarrolladores de Python