4.34 de 5
4.34
3444 reseñas sobre Udemy

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

El curso de React en español más elegido. Desarrollo en forma práctica, ejemplos, fundamentos y herramientas útiles
Instructor:
Ing. Emiliano Ocariz
11.325 estudiantes matriculados
Crear aplicaciones web profesionales
Conocer a fondo React y Redux
Muchas herramientas, ténicas y trucos
Aplicar patrones de diseño y mejores prácticas
Conseguir trabajo como desarrollador ReactJS
Hooks

Podrás crear aplicaciones React con Redux utilizando todas las features de ES6 y la última versión de React. Vamos a ver utilización de selectores, herramientas de debugging, la última versión de React Router, validaciones con PropTypes, plugins para el editor VSCode 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.

ACTUALIZACIÓN: Ahora también con Hooks!

Estructura del curso

1
Antes de comenzar
2
Tips

Preparandonos

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

Comenzamos!

1
Creación de app react

Importante: Siempre acceder con permisos de administrador para poder ejecutar el comando "npm install -g"

2
Planificación con Wireframes
3
Creación de functional component

El código fuente que se ve en el archivo WeatherLocation es el siguiente:

  1. const WeatherLocation = () => (
  2.     <div>Weather Location</div>
  3. );

Revisar la utilización de los signos "=" (igual) y paréntesis.

4
VSCode Plugins y extensiones
5
ES6 Arrow Functions
6
Ejercicio: Creación de componentes e importación
7
Componentes WeatherExtraInfo y WeatherTemperature
8
Uso de parámetros / Herramientas de debugging Chrome
9
Parámetro con Object Destructuring
10
ES6: Object Destructuring
11
Parámetros y uso de template string
12
ES6: Template Strings
13
Instalación de libreria con npm install o yarn add
14
Recomendaciones sobre uso de packages externos y ubicación del index.html
15
Agregar Icono y uso de función en functional component

Detalle del código:

  1. const getWeatherIcon = (weatherState) => { // Uso llave apertura
  2.                switch (weatherState) {
  3.                     case "cloud":
  4.                         return (<WeatherIcons name="cloud" size="2x" />);
  5.                      default:
  6.                          return (<WeatherIcons name="sleet" size="2x" />);

                 }

  1. };

Haciendo el código más sólido

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

Dándole estilo

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

Avanzamos

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

Conectando con Api

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

Más estilo

1
Material Design
2
Material UI
3
Instalación y uso de MaterialUI

Seguimos codificando

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

Diseño Responsivo

1
NOTA SOBRE ACTUALIZACIÓN

La mayoría de las clases anteriores fueron actualizadas recientemente con el objetivo de incorporar nuevos conceptos y mejorar la calidad de audio y video.

En las siguientes clases quizás puedan notar algunas pequeñas diferencias, las cuales no deberían ser problema ya que son menores, y la idea es continuar lo anterior más las modificaciones que se vayan realizando.

Si tuvieran algún tipo de duda, me preguntan y aclaramos cualquier tipo de duda que pudiera surgir.

¡Adelante!

2
MediaQueries, Flexbox, Bootstrap
3
Grid System de React Flexbox / Bootstrap

En la imagen adjunta se pueden ver las clases del archivo App.css, para seguir mejor este ejercicio.

4
React Flexbox: Autosize, Alignment, Distribution
5
Herramienta en Chrome para testear diseño responsivo
6
Uso de Grid, Row, Col y vh
7
MaterialUI AppBar
8
CSS Mejoras
9
Diseño Responsivo avanzado: Media Query

Más herramientas y ES6!

1
Plan de componente ForecastExtended
2
Creación de ForecastExtended
3
Creación de parámetro para ForecastExtended
4
Utilización de state en App.js
5
Actualización de state
6
Ciclo de actualización de state / render
7
Manejo de estado inicial
8
Manejo de estado inicial 2
9
Truthy values y Falsy values
10
Estilo ForecastExtended: Utilización de ClassName
11
Presentación del componente ForecastItem
12
Creación componente ForecastItem
13
Utilización de array de componentes
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.3
4.3 de 5
Calificaciones 3444

Calificación Detallada

5 estrellas
1569
4 estrellas
1239
3 estrellas
476
2 estrellas
98
1 estrellas
62