React JS + Redux + ES6. Completo ¡De 0 a experto! (español)

El curso más elegido, ¡totalmente renovado!. Desarrollo en forma práctica, ejemplos, fundamentos y herramientas útiles

4.64 (4614 reviews)
Udemy
platform
Español
language
Web Development
category
15,135
students
53.5 hours
content
Apr 2022
last update
$69.99
regular price

What you will learn

Crear aplicaciones web profesionales

Conocer a fondo ES6, React y Redux

Muchas herramientas, ténicas y trucos

Aplicar patrones de diseño y mejores prácticas: TDD, SOLID, DRY

Conseguir trabajo como desarrollador ReactJS

Todos los Hooks: useState a fondo, useRef, useEffect, useDebugValue, useMemo, useCallback, useReducer, useContext

Deploy a Firebase

Description

Podrás crear aplicaciones React con Redux utilizando todas las features de ES6 y la última versión de React, desde 0.

  • Todos los hooks!

  • Firebase (deploy)

  • ES6

  • TypeScript

  • TDD con React / StoryBook

  • Vamos a ver utilización de selectores, herramientas de debugging

  • React Router

  • Plugins para el editor VSCode

  • Secretos y trucos para ser más efectivo y productivo

  • Y mucho más!

Orientado desde la base de todos los temas, para que cada uno pueda avanzar a su propio ritmo, mostrando siempre primero la práctica y luego la explicación teórica, para que no falte nada y sea mucho más interesante.

Para asegurarte que este curso es la elección correcta para tí, puedes revisar los temas de cada uno de los videos y aprovechar las lecciones en previsualización gratuita.


Content

Estructura del curso

Antes de comenzar
Tips

Preparandonos

Node.js, Npm y Yarn
Gestor de Paquetes NPM y Yarn
VSCode
Puntos fuertes de React JS
¡Hola Mundo! Babel, ES6, CodePen

Comenzamos!

Creación de app react
Planificación con Wireframes
Creación de functional component
VSCode Plugins y extensiones
ES6 Arrow Functions
Ejercicio: Creación de componentes e importación
Componentes WeatherExtraInfo y WeatherTemperature
Uso de parámetros / Herramientas de debugging Chrome
Parámetro con Object Destructuring
ES6: Object Destructuring
Parámetros y uso de template string
ES6: Template Strings
Instalación de libreria con npm install o yarn add
Recomendaciones sobre uso de packages externos y ubicación del index.html
Agregar Icono y uso de función en functional component

Haciendo el código más sólido

Utilización de constantes
PropTypes
Validación con PropTypes
Repaso sobre validaciones de PropTypes
Truco para refactorizar sin problemas: Uso de carpetas e Index.js

Dándole estilo

Cómo incluir CSS en React
Opciones para estilo: CSS, Preprocesadores CSS y CSSModules
CSS en React "Under the hood"
Aplicación de estilos CSS
Estilos componente WeatherTemperature
Estilos componente WeatherExtraInfo
External Font y otros detalles
Herramientas de debugging para estilo y CSSMatic

Avanzamos

Doble Destructuring
Utilización de PropType.Shape
Cómo transformar un functional en un class Component
Evento OnClick y manejo de State
SetState (updater)
React Developer Tools para Chrome

Conectando con Api

Api Rest OpenWeatherMap
Fetch y solapa de debugging Network de Chrome
Promises
Utilización de valores retorno de Fetch
Transformación de datos
Arquitectura de datos: independencia de API
Object Literal Property Value Shorthand
Convert-Units
Services Layer
React Class Component LifeCycle
ComponentDidMount y Network Slow 3G Chrome Tool
Indicador de Carga, utilización ternario

Más estilo

Material Design
Material UI
Instalación y uso de MaterialUI

Seguimos codificando

Utilización y configuración de ESLinter
Uso de propiedades en Class Component combinado con state
LocationList
Mapeo de estados a íconos
Agregamos parámetros a LocationList
Refactorización de LocationList
ES6: Función de collections Map
Uso de Key en listas de componentes
Estilos de comunicación de componentes: Eventos, Routing y Estado global
"Burbujeo" de eventos
Repaso de los eventos creatos y salida por consola

Diseño Responsivo

NOTA SOBRE ACTUALIZACIÓN
MediaQueries, Flexbox, Bootstrap
React Flexbox: Autosize, Alignment, Distribution
Herramienta en Chrome para testear diseño responsivo
Uso de Grid, Row, Col y vh
MaterialUI AppBar
CSS Mejoras
Diseño Responsivo avanzado: Media Query

Más herramientas y ES6!

Plan de componente ForecastExtended
Creación de ForecastExtended
Creación de parámetro para ForecastExtended
Utilización de state en App.js
Actualización de state
Ciclo de actualización de state / render
Manejo de estado inicial
Manejo de estado inicial 2
Truthy values y Falsy values
Estilo ForecastExtended: Utilización de ClassName
Presentación del componente ForecastItem
Creación componente ForecastItem
Utilización de array de componentes
Incorporación de WeatherData al ForecastItem
Planificación de Fetch contra servidor
Primer paso de refactorización de ForecastExtended: Indicador carga inicial
Api OpenWeatherMap para pronostico extendido: Forecast
Ejecución de Fetch Forecast
Creación de servicio de transformación
Plan de transformación de datos
Moment.Js
Utilización de filter
Uso de Map, y Culturización con Moment Locale
Generación de ForecastItems en base a los datos
Mejora visual
Ciclo de vida de React: ComponentWillReceiveProps

React conceptual

Revisamos lo que vimos
Ciclo de Vida React 16
¿Qué hace que un componente se actualice?
Virtual DOM
One Way Data Flow
Proceso de Reconciliation
Reconciliation en acción
SPA vs MPA

Comenzamos con Redux

Redux
Instalación de Redux, React-Redux y React Dev Tools Plugin
Creación de store, dispatch de acciones y uso de React Dev Tools
Generación de action creator
Mejora a action creator
Refactorización de Store y vinculación de Provider
Connect
¿Función que retorna funciones?
Connect en detalle
Validación de funciones inyectadas por DispatchToProps
Containers vs Presentational Components
Creación de container LocationListContainer
Creación de Reducer
Entendiendo el reducer
Pure Functions
Container responde a MapStateToProps
Repasando MapStateToProps y MapDispatchToProps

Redux avanzado

Middlwares de Redux
Incorporación de middlware Thunk
Redux-Thunk desde adentro
Planeamos: Nuevo estado de aplicación
Refactor action setCity
Creación de reducer cities
Utilización de combineReducers
Simplificación de class component a functional component
Selectores primer nivel
Selectores, completo
Reselect
Memoization y fortalezas de los selectores
Refactor de componente con state a functional component
Creación de Action Creators
Creación de Reducer
Selector
Lodash
Utilización de toPairs (entries)
toPairs en detalle
Uso de spread operator para realizar copia en segundo nivel
Establecer Forecast desde en carga inicial
BindActionCreators
Uso de segundo parámetro getState en redux-thunk
Redux, Flux y SSOT

Ejercicio Avanzado con React Router

Presentación de temas
Wireframes de la aplicación CustomersABM
Creación de la aplicación y primeros componentes
Código fuente
Componente CustomerData
Componente CustomerActions
Componente Link
CustomerListItem
CustomersList
CustomerEdit dummy
Estructura de navegación
Utilización de Route
Utilización de Switch
HomeContainer e implementación con Link
Utilización de history.push y withRouter
Customer Container
WithRouter y navegación a eliminar
React Router v4, dynamic router y más
Route, match, switch, history y más
Pasos para crear fetchCustomers
Creación de store y vinculación con provider
Redux-Actions
Utilización de DefautlProps, HandleAction y HandleActions
createAction: payloadCreator
Utilización de Selector
Json-Server
Middlware Redux-Promise
Api Get
Redux-Promise a fondo
Creación de CustomerContainer
Utilización de Route.render y paso de parámetros
Utilización de segundo parámetro "Props" en MapStateToProps
Refactor y utilización de reselect
Ruteo dinámico y propiedad "children" de Route
Spread Properties y Component Type en ejecución

Redux-Form y más!

Forms en React vs Redux Forms
Instalación de Redux Form, incorporación del reducer
Utilización de Fields de Redux Form
Uso de InitialValues
Creación de Higher Order Component
Teoría sobre los HOC
Validación a nivel de Field (isRequired)
Validaciones múltiples en fields y mejora a MyField
Validación de fields a nivel global
Submitting del Form
Navegación Back programática
EnableReinitialize en el Form
updateCustomer: Utilización de Fetch PUT
Repaso de todo el ciclo de actualización
DisabledButton en submitting mediante promise
Herramienta Postman
onSubmitSuccess
Parse y Format
Normalize
Validación de servidor con SubmissionError
Prompt y cancelación de navegación
NewCustomerContainer
Repaso Redux-Form

Más React, ES6, React-Router y CSS!

InsertCustomer con POST
Insert inmediato con reducer
ES6 Reduce en profundidad
ES6 Reduce sobre Arrays (para update)
ref: Componentes No Controlados
Uso de ref para establecer foco
Plan para Eliminación de Customer
Agregando "IsDeleteAllow" a CustomerData
Rutas Anidadas en React Router v4 y ES6 Rename
Truco de doble negación
Fetch Delete en eliminación de Customer
Reducer DeleteCustomer
Css y mejora de look and feel

Hooks!!

Introducción a Hooks
Hooks más importantes y sus claves para entenderlos
Código de aplicación de ejemplo
Presentación de la aplicación de ejemplo
Primer hook en práctica: useState
Haciendo el Seconds.js con useState
useEffect. Explicación fundamentos
useEffect en acción!

Bonus!

Creamos un HOC y validamos accesos

Palabras finales

Hasta Pronto

Screenshots

React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Screenshot_01React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Screenshot_02React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Screenshot_03React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Screenshot_04

Reviews

박주한
July 16, 2023
The content and technology are good, but since it was a Spanish-based lecture, it would have been better if there were various subtitles such as English.
Oscar
April 21, 2023
Muy buen curso, explica todo de manera concreta y fácil de entender, claro que debes venir con algo de conocimiento previo pero es lo esperado y lo normal a este nivel.
Jesus
January 6, 2023
Era increíble de comienzo, el mejor curso de todos pero fue muy malo al final, demasiada complejidad innecesaria y demasiados refactors innecesarios. Confunde más que enseñar.
Sergio
October 18, 2022
El curso está bien explicado, pero hay que tener presente que tiene unos años y que hay muchas cosas que no funcionan, has de instalar cosas haciendo un --force con npm para que acepte las versiones antiguas o tendrás que hacerte tus HOC propios tipo withRouter para hacerlo funcionar, ya que con react 18 cambian muchas cosas y este curso está pensado para react 15.
CARLOS
August 29, 2022
Mi experiencia fue satisfactoria, muy buen curso y aunque React es bastante complejo por su constante versionamiento, este curso me ha dejado buenas bases para entender hacia a delante.
Daniel
August 14, 2022
Excelente la informacion suministrada. Al inicio aparenta ser un poco desordenado, pero honestamente vale la pena el curso, ya que el tutor se esfuerza en manejar los videos en pequeños segmentos de informacion, lo cual lo hace mucho mas entendible
Ramon
June 22, 2022
SI es una buena experiencia, solo tuve problemas al cambiar la extensión del archivo .js a .jsx no se explicaba que tenia que bajar y subir el puerto
Alejo
June 22, 2022
Muy bueno, completo y claro en las explicaciones. Muchos temas de los que vi en el curso los necesite para test en trabajos. Muy recomendable
Luis
May 3, 2022
Buenisimo, solo que al momento de crear un nuevo proyecto en Codesandbox, su version esta desactualizada
Román
April 11, 2022
La última cuarta parte del curso, relativa a redux, está algo desactualizada. Esto causa que, al no partir de la misma versión de código con la que hemos estado trabajando a lo largo del curso, cuesta bastante seguir el hilo. Por todo lo demás, el curso es muy recomendable y vale mucho la pena si tienes conocimientos muy básicos de javascript y quieres aprender a trabajar sobre React.
Juan
April 4, 2022
Voy en la sección 7 y me parece sumamente aburrido, siento que le da muchas vueltas a lo mismo, ejemplo: el tema de los props 3 videos hablando y haciendo lo mismo, espero y el curso mejore :S
Carlos
March 23, 2022
Desglosa los temas de forma correcta y busca reintegrar los conceptos olvidados o de nivel mas básico cuando son importantes
Luis
February 21, 2022
Extraordinario Curso, el mejor que he seguido hasta ahora en la plataforma UDEMY, mis felicitaciones y gracias al profesor.
Jonathan
February 19, 2022
Excelente el profesor. Buena manera de esplayarse a la hora de explicar porqué se hace lo que se hace y porqué no de otra manera, además de las posibles aplicaciones que puede tener cierto método.
Mario
February 9, 2022
El curso está muy bien para obtener conocimientos básicos de React. No le pongo 5 estrellas porque la verdad que hay muchísimas clases sobre todo de mitad del curso en adelante que te empiezas a perder, demasiado refactor, paso de funciones entre componentes, estados mezclados. Entiendo que lo hace intencionadamente para que entiendas como se va comportando todo, pero realmente te llegas a perder y aburrir un poco. No es mala inversión de cualquier modo, se aprende bastante

Charts

Price

React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Price chart

Rating

React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Ratings chart

Enrollment distribution

React JS + Redux + ES6. Completo ¡De 0 a experto! (español) - Distribution chart
1374394
udemy ID
10/3/2017
course created date
11/1/2019
course indexed date
Bot
course submited by