React - La Guía Completa: Hooks Context Redux MERN +15 Apps
4.7 (2,972 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.
10,062 students enrolled

React - La Guía Completa: Hooks Context Redux MERN +15 Apps

Incluye React Hooks, Gatsby y GraphQL, Firestore, Redux, Context, MERN, Next.js, Styled Components, Custom Hooks Y MÁS!!
4.7 (2,972 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.
10,062 students enrolled
Last updated 6/2020
Spanish
Spanish [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
3 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 41 hours on-demand video
  • 6 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
  • El curso incluye SSR, Gatsby, Nextjs, MERN, Styled Components, Context
  • Crear proyectos con Redux y React Redux v7 (con Hooks)
  • Crear Más de 15 Proyectos con React
  • Conocer React a fondo
  • Conocer que es son los Hooks y crear tus propios Hooks
  • Utilizar Fetch API y Axios con React para consumir API's
  • Integrar React con otras tecnologías JavaScript como Local Storage
  • Crear aplicaciones y request CRUD con React
  • Conocer Server Side Rendering con React con Nextjs y Gatsby
  • Deployment de Aplicaciones en React en Netlify, Heroku, Zeit y mucho más
  • Crear Proyectos en React y escribir código React que siga las buenas prácticas
  • Crear Proyectos con Nextjs y Gatsby
  • Integrar Mongo Express y Node con React
  • Aprender los Hooks useReducer y useContext
Course content
Expand all 556 lectures 41:07:59
+ Introducción al Curso y Proyectos que construiremos
7 lectures 31:14

Estos son los proyectos más avanzados que incluye el curso!

Preview 08:29

Veamos la segunda parte de lo que aprenderás!

Preview 10:29

Veamos que es React!

Preview 02:17

Se requieren algunos conocimientos básicos para tomar este curso, veamos que es lo que requieres saber

Preview 01:04

Veamos lo que aprenderás en este curso

Preview 01:58

Algunas recomendaciones para sacarle máximo provecho al curso!

Preview 04:15

Todos los códigos se encuentran disponibles en Github, en este video te mostraré como utilizarlos

Sobre los Repositorios de Código en Github
02:42
+ JavaScript - Introducción / Recordatorio, ¿Cuanto JavaScript debo saber?
25 lectures 01:57:52

Veamos como configurar VS Code para React!

Visual Studio Code y Extensiones Recomendadas
02:12

Veamos como crear variables con var, que es la forma anterior de crear variables pero aún hoy en día hay millones de proyectos funcionando con esta sintaxis

Variables con var
05:29

En JavaScript moderno las variables se crean ya con let y const, veamos las diferencias

Variables con let y const
03:00

Veamos que es el Scope en JavaScript

Scope en JavaScript
04:22

En este video veremos los template strings en JavaScript

Template Strings en JavaScript
07:04

Veamos como crear funciones y los tipos de funciones en JavaScript

Funciones y los distintos tipos de funciones
06:33

Veamos como pasarle parametros o argumentos a las funciones

Funciones con parametros
03:55

En este video veremos lo que son los arrow functions

Arrow Functions
04:39

Tiempo de comenzar a revisar lo que son los objetos, primero el más sencillo y más utilizado, el object literal

Objetos en JavaScript - Object Literal
04:41

Continuamos con el repaso de JavaScript, ahora veremos lo que es el Object Constructor

Objetos en JavaScript - Object Constructor
04:10

En este video veremos lo que son los Prototypes en JavaScript

Prototypes
07:48

En React el Object Destructuring sera de los temas más importantes, veremos como utilizarlo

Object Destructuring
06:06

En este video veremos lo que es el Object Literal Enhacement, que es lo contrario al Object Destructuring

Object Literal Enhacement
02:19

Hay funciones exclusivas para Objetos, veamos algunas

Funciones en un Objeto
02:24

Veamos lo que son los arreglos, .map y Object.Keys!

Arreglos, map y Object.keys
05:05

En este video veremos un par de ejemplos con el spread operator

Spread Operator
05:18

Veamos .filter, find y reduce, unos excelentes métodos para realizar unas tareas complicadas muy fácil con pocas lineas!

.Filter .find y .reduce y métodos para arreglos
06:52

En este video veremos lo que son los promises, ya cuando trabajemos con fetch y axios, seran de gran utilidad

Promises
04:07

Veamos un ejemplo de promises con ajax!

Promises con Ajax
05:42

Veamos como imprimir el resultado al HTML

Mostrando el resultado en nuestro HTML
03:40

Veamos como crear clases, objetos y métodos dentro de JavaScript

Programación Orientada a Objetos - Clases
05:50

Continuamos con programación orientada a objetos :)

Programación Orientada a Objetos - Clases - Heredando de una Clase
06:09

Veamos como y que son los módulos en ES6

Módulos en ES6
05:40

En este video veremos como exportar funciones dentro de Módulos

Exportando Funciones en Módulos
02:37

Veamos como exportar clases en ES6

Exportando Clases en Módulos
02:10
+ Instalando Node.js, NPM y qué es Create-react-app
1 lecture 06:07

Vamos a instalar todo lo que requerimos


Instalando Node, Npm y que es create-react-app
06:07
+ Introducción y Básicos de React
13 lectures 01:09:20

Veamos la estructura de create-react-app

La estructura de Create react app
05:33

Veamos como crear nuestro primer componente en react y como utilizarlo

Creando nuestro primer Componente
03:25

Veamos lo básico de JSX, JSX es una combinación de JavaScript y HTML que utiliza react!

Básicos de JSX
04:59

Veamos como crear un segundo componente y utilizarlo

Creando un Segundo Componente
06:25

En React los datos fluyen del padre al hijo por algo llamado props, veamos con un ejemplo como utilizarlos!

Que son los Props
06:49

Veamos una breve introducción a React Hooks antes de comenzar a utilizarlos

Introducción a React Hooks
03:44

Veamos como crear nuestro primer state

Primeros pasos con el State de React
04:16

En este video veremos como iterar sobre nuestro state y mostrarlo

Como mostrar una colección del State
04:43

Veamos como maneja React los Eventos

Eventos en React
04:10

Vamos a crear un segundo state!

Creando un segundo state y función para agregar elementos a ese State
05:48

Vamos a finalizar la función para nuestro segundo state!

Finalizando nuestra función para agregar elementos al carrito y actualizar state
04:42

Conforme vayamos agregando elementos al carrito, lo ideal es irlos mostrando, veamos como hacerlo

Mostrando los elementos del carrito
07:06

Veamos como eliminar elementos del carrito

Eliminando Elementos del carrito
07:40
+ PROYECTO: Administrador de Pacientes
18 lectures 01:10:05

Veamos el Proyecto Finalizado

El Proyecto Finalizado
01:21

Vamos a comenzar un nuevo proyecto!

Creando el Proyecto y copiando CSS
03:25

Veamos como crear el componente del formulario

Creando el Componente de Formulario
02:49

Vamos a añadir los campos al formulario

Agregando los campos del formulario
05:19

Vamos a crear el state que contendrá las citas

Creando el state para las citas
04:48

Veamos como leer lo que el usuario escribe en los inputs

Leyendo lo que el usuario escribe en los inputs
05:41

Veamos como añadir un evento para cuando el usuario presiona submit

Evento para leer cuando el usuario envie el formulario
03:21

Veamos como validar formularios en react

Validación de Formularios en React
06:33

Requerimos un ID para las citas, veamos como añadirlo

Asignando un ID a las citas
04:00

Veamos como agregar las citas

Creando las Citas
05:04

Veamos como reiniciar el formulario

Reiniciar el Formulario
01:23

Veamos como mostrar las citas

Mostrando las Citas
04:36

En este video veremos como eliminar una cita del state

Eliminar Citas del State
04:33

Vamos a mostrar un mensaje de forma condicional, si hay citas aparecerá un texto, si no hay, aparecerá otro

Mostrando un mensaje de forma condicional
02:07

En este video veamos un hook nuevo, useEffect

El hook useEffect
03:22

Veamos como añadir localstorage a nuestro proyecto

Agregando LocalStorage
05:08

Veamos como documentar un Componente

Documentando con PropTypes
04:14

Veamos como realizar el Deployment a Netlify

Deployment del Proyecto
02:21
+ PROYECTO: Control de Presupuesto
19 lectures 58:22

Veamos el Proyecto que vamos a construir en este capítulo

Lo que vamos a construir
01:35

Vamos a crear la app y darle algunos ajustes antes de continuar

Creando la App y Primeros Ajustes
02:35

Vamos a preguntarle al usuario por su presupuesto con un formulario

Preguntando al Usuario por su Presupuesto
03:01

Vamos a leer el presupuesto del usuario

Leyendo el Presupuesto del Usuario
04:16

Veamos como verificar que el presupuesto sea válido

Validar un Presupuesto
02:16

Vamos a mostrar mensajes de error en caso de un presupuesto incorrecto

Mostrando mensajes de error
02:03

Vamos a guardar el presupuesto una vez que sea válido

Almacenando el Presupuesto
02:25

Vamos a añadir un formulario de gastos

Creando Formulario de Gastos
03:01

Veamos como mostrar un componente u otro

Cargando un Componente u Otro
03:25

Vamos a añadir el state  para los gastos

Creando el State para los Gastos
03:26

Veamos como agregar validación a los gastos

Validando los Gastos
02:45

Veamos como agregar los gastos

Crear un nuevo gasto
01:53

Veamos como añadir los gastos al state

Colocando los Gastos en el State de Gastos
02:57

Veamos como mostrar los gastos conforme se agregan

Mostrando los gastos en la interfaz
03:16

Vamos a crear el Componente para Controlar el PRESUPUESTO

Creando el Componente que mostrará el Presupuesto y el Restante
02:50

Conforme se agregan gastos deseamos que el presupuesto restante vaya bajando, veamos como hacerlo

Restando del Presupuesto al añadir un gasto
04:30

Veamos como ir cambiando el color del presupuesto restante

Cambiando el color del restante conforme se agota el presupuesto
05:24

Vamos a añadir los proptypes !

Documentando la App
05:37

Vamos a realizar el Deployment a Netlify

Deployment a Netlify
01:07
+ PROYECTO: Cotizador de Seguro de Automóvil
18 lectures 01:15:52

Veamos el Proyecto Final

El Proyecto que vamos a construir
01:49

Vamos a crear la app y cargar algunas hojas de estilo

Creando la App y Ajustes
03:28

Emotion es una forma de agregar CSS en JS, veamos como usarlo

Agregando Emotion para Styled Components
05:32

Vamos a crear nuestros primeros Styled Components

Creando los Primeros Styled Components
01:52

Vamos a crear el Formulario

Creando el Formulario
03:59

Vamos a crear Styled Components para el Formulario

Creando los Styled Components para el Formulario
04:09

Vamos a finalizar los Styled Components

Finalizando los Styled Components del Formulario
03:13

Veamos como leer lo que el usuario coloca en el formulario

Leyendo la información que el usuario Selecciona
03:58

Veamos la validación del formulario

Validando el Formulario
04:42

Veamos como calcular el costo del seguro

Calculando el Costo basado en años
04:00

Veamos el segundo parametro a la hora de calcular el costo

Calculando el costo basado en la marca
03:57

Vamos a finalizar la cotización!

Calculando el costo basado en el plan
03:45

Vamos a crear un componente que muestre un resumen

Creando un Componente para Resumen de cotización
06:05

Vamos a mostrar el resumen

Mostrando el Resumen
03:45

Veamos como mostrar el total a pagar

Mostrando el Total a pagar
06:42

Veamos como añadir una animación

Agregando una animación
03:35

Veamos como añadir un Spinner de carga

Agregando un Spinner
06:09

Vamos a finalizar este proyecto!

PropTypes y últimos ajustes
05:12
+ PROYECTO: Frases de Breaking Bad desde una API
8 lectures 29:08

Veamos el Proyecto que vamos a construir, es el primero que usará datos de Internet!

El Proyecto que vamos a construir
00:46

Vamos a crear la App y realizar algunos ajustes

Creando la App y Ajustes
03:04

Veamos como añadir Emotion a este proyecto para continuar practicando

Agregando Emotion
04:55

Veamos los diferentes tipos de API's

API's, REST API's y Requests
05:19

Veamos como consultar la API

Obteniendo una frase desde la API
03:43

Veamos como mostrar la frase

Mostrando la frase
03:26

Vamos a escribir el CSS para la frase

CSS a la frase
05:21

Veamos un nuevo hook, useEffect que se ejecutará automaticamente o cuando algo cambié

useEffect para ejecutar código una vez (o cada que algo cambie)
02:34
+ PROYECTO: Obtener el Clima desde una API
12 lectures 49:19

Veamos el Proyecto que vamos a construir

El Proyecto que vamos a construir
01:08

Vamos a configurar la API y algunos ajustes

La API, creando la App y Primeros Ajustes
03:58

Vamos a crear el Header de nuestro proyecto

Creando el Header
02:59

Vamos a añadir el Formulario

Creando el Formulario
04:53

Veamos como leer lo que el usuario escribe  en el state

Creando el State y Leyendo lo que el usuario selecciona
04:11

Vamos a validar el Formulario

Validando el Formulario
03:42

Vamos a comenzar con la función que va a consultar la API

Escribiendo la función para consultar la API
04:18

Veamos como obtener los resultados de la API

Obteniendo los resultados de la API
03:48

Una vez que tenemos los resultados, deseamos mostrarlos, veamos como

Mostrando el Clima y Resultado de la API
08:35

Veamos como revisar que la ciudad que se consulta exista

Verificando que haya resultados
05:03

Vamos a añadir los proptypes

Documentando la App
03:54

Veamos como realizar el Deployment de la app!

Deployment de la App
02:50
+ PROYECTO: Cotizador de Criptomonedas
18 lectures 01:02:36

Veamos el Proyecto que vamos a construir

El Proyecto que vamos a construir
01:10

Vamos a comenzar este proyecto

Creando el Proyecto y Primeros Ajustes
02:56

Vamos a crear unos Style Components para la parte principal

Styled Components para el Contenido Principal
04:18

Vamos a crear el lugar donde estará el Formulario

Creando el Componente Formulario
03:30

Veamos como puedes crear tus propios Hooks

Creando Custom Hooks para las Monedas
07:16

Vamos a utilizar nuestro hook

Utilizando nuestro custom Hook
05:17

Veamos como obtener lo que el usuario selecciona

Leyendo lo que el usuario selecciona desde el custom hook
01:16

Finalmente vamos a darle un poco de apariencia al Hook

Styled Components al Custom Hook
02:39

Vamos a crear un Hook para las Criptomonedas

Creando un segundo Custom Hook
02:52

Vamos a pasar los resultados de una API al custom Hook

Pasando Criptomonedas al Custom Hook desde una API
04:28

Vamos a construir el Select

Construyendo el Select
01:54

Veamos como validar el formulario

Validar el Formulario
02:19

Vamos a crear el Styled Component para los errores

Styled Component para el Error
02:21

Veamos como pasar los valores hacia el Effect

Pasando los valores a cotizar a un Effect
03:31

Vamos a enviar los parametros a la API para obtener la cotización

Consultando la API con la cotización
04:30

Vamos a mostrar el resultado de la cotización

Mostrando el Resultado en la UI
04:29

Vamos a aplicar un poco de CSS al Resumen

CSS al Resumen
03:06

Veamos como añadir un Spinner con Spinkit

Agregando un Spinner
04:44
Requirements
  • Si has escrito HTML, CSS y JavaScript y deseas aprender React, estas en el curso adecuado
  • Incluso si no has escrito Código JavaScript Moderno ( ES6+ ) el curso tiene una sección de JavaScript antes de comenzar con React
  • No es necesario conocimientos previos en React asumo que nunca has escrito una sola línea de React!
Description

El único curso que enseña REACT SIN CONOCIMIENTO PREVIO HASTA LOS TEMAS MÁS AVANZADOS! COMPLETAMENTE REGRABADO  (2020) PARA APRENDER HOOKS, CONTEXT Y REDUX, MERN, Gatsby, GraphQL Creando más de 15 proyectos

React es una librería JavaScript desarrollada por Facebook para crear Interfaces Web y Aplicaciones Interactivas y con flujo de datos más complejo que  jQuery o JavaScript.

Aprender React sin duda te hará mejor desarrollador Web y JavaScript, es una libreria que nos permite escribir código de JavaScript Moderno hoy en dia.

En este curso aprenderás esta librería creando múltiples proyectos del Mundo Real.

Si nunca has escrito  código React pero tienes deseos de aprenderlo, estas en el curso adecuado, asumo que nunca has escrito una sola linea de React.

¿No has escrito código JavaScript o escribiste JavaScript en las versiones anteriores y no lo recuerdas? El curso también incluye una Introducción / Recordatorio a JavaScript!


¿Que Aprenderé en el Curso?

1.- Introducción al Curso y Proyectos que construiremos

Veremos todo lo que aprenderás en el curso de React JS

2.- JavaScript - Introducción / Recordatorio, ¿Cuanto JavaScript debo saber para aprender React?

Al ser React una  librería JavaScript, lo ideal es tener algo de conocimiento en este lenguaje, ya sea que nunca hayas escrito una línea de JavaScript o lo hayas hecho hace tiempo, este capítulo contiene todo lo que debes saber antes de comenzar con ReactJS

3.- Instalando NodeJS, NPM y create-react-app

Muchos cursos te enseñarán a crear un workflow con Webpack y extender así la duración del curso,  create-react-app ya tiene todo lo que necesitas, por lo tanto crearemos los proyectos con esta herramienta.

4.- Introducción Básicos de React

Comenzaremos a Escribir el código básico de React, veremos que es JSX, Componentes, Props, State, términos que son nuevos y existen en React, una base sólida antes de comenzar a crear proyectos más avanzados.

5.- PROYECTO: Administrador de Pacientes de Veterinaria

En este proyecto aprenderás a leer datos de formularios y su validación, mostrar componentes de forma condicional y conocer más sobre el flujo del state, también veremos como integrar LocalStorage con React

6.-PROYECTO: Control de Presupuesto

Estaremos creando un proyecto donde profundizaremos más en React y algunas funciones muy útiles para operaciones, así como aprender más sobre leer formularios y state.

7.- Cotizador de Seguros de Autos

Veremos como integrar funciones "helper" además de animaciones en React junto a lo que ya sabemos como State, formularios y Componentes.

8.- PROYECTO: Frases de Breaking Bad desde una API

Será el primer Proyecto que obtenga datos de la web al momento desde un servidor, veremos como consultar una API con Fetch y async/ await e integrarlo a React

9.- PROYECTO: Obtener el Clima desde una API

Veremos como tomar los datos de un formulario y pasarlos como parametros a una API, de ahí haremos la consulta para obtener el clima de una ciudad.

10.- PROYECTO: Cotizador de Criptomonedas

Veremos como tomar 10 criptomonedas y cotizarlas en TIEMPO REAL para obtener su precio al momento, ya sea Bitcoin a USD o Ethereum a Peso Mexicano los datos vienen desde una API y aprenderemos más sobre Styled Components.

11.- PROYECTO: Buscador de Noticias con una API

Será de los últimos proyectos con API's gratis, veremos como crear Custom Hooks y otros temás como CSS Modules

12.- PROYECTO: Buscador de Imágenes con Pixabay API

Además de lo que aprendemos en cada proyecto (state, formularios, validación, props) este proyecto incluye un paginador personalizado y otras caracteristicas.

13.- PROYECTO: Buscador letras e información de artistas

Este proyecto realiza una consulta hacia 2 API's al mismo Tiempo

14.- PROYECTO: Buscador de Bebidas con Context

Comenzaremos a trabajar con Context API y el nuevo Hook de useContext() uno de los proyectos de nivel intermedio que te van a preparar para los temas siguientes.

15.- PROYECTO MERN: Administrador de Proyectos y Tareas

Aprende a Crear tu propio Basecamp, Asana o Trello con esta App, permite a los usuarios crear su cuenta, iniciar sesión y comenzar a crear proyectos y asignarles tareas, los usuarios podrán marcar y desmarcar tareas finalizadas y tendrá todas las opciones del CRUD (Crear Leer Actualizar y Borrar)
El Proyecto utiliza MERN (MongoDB Node.js Express y React) estaremos creando una REST API desde cero que conectaremos a React.

16.- Next.js y Firebase: Creando un Clon del Sitio Product Hunt

Aprende Next.js el framework React para crear sitios y aplicaciones SSR, lo integraremos con Firebase ( incluyendo Autenticación, Storage, Database y Hosting) para crear un clon del sitio web product hunt, los usuarios podrán darse de alta, dar de alta productos, recibir votos y comentarios!

17.- Gatsby, GraphQL y DatoCMS

Si hay una tecnología que debes aprender este 2020 es Gatsby, la velocidad y performance son increibles, además esta hecho en React, utiliza SSR y soporta GraphQL, sin duda el presente y futuro de React!

Who this course is for:
  • Si ya has tomado un curso en React pero te dejo más dudas que otra cosa, este curso es para ti, iremos paso a paso introduciendo temas nuevos y cada vez más complejos
  • Desarrolladores y Programadores Web que desean incorporar React a sus habilidades
  • Desarrolladores que deseen aprender la Librería más popular para Aplicaciones Modernas con JavaScript
  • Si eres de las personas que aprenden más desarrollando proyectos reales, este curso es para ti, incluimos más de 15 Proyectos!
  • Si eres de las personas que aprenden con cursos paso a paso, escribiendo código sin prisas y sabiendo que sucede, este curso es para ti,
  • React es una de las librerías mejor pagadas, cualquier persona que desee obtener un ingreso mayor debe tomar este curso