Udemy

Platform

Español

Language

Web Development

Category

React 2020

El curso de React renovado

4.75 (24 reviews)

Students

29 hours

Content

Nov 2020

Last Update
Regular Price


What you will learn

Crear aplicaciones web profesionales

Conocer a fondo React

Muchas herramientas, ténicas y trucos

Aplicar patrones de diseño y mejores prácticas

Conseguir trabajo como desarrollador ReactJS

Todos los Hooks


Description

Podrás crear aplicaciones React con hooks 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.



Screenshots

React 2020
React 2020
React 2020
React 2020

Content

Introducción al curso

Me presento

Plataforma Udemy

Características del curso

Preguntas

Conceptos básicos

Presentación de la sección

Conceptos base de HTML CSS JS (t)

Conceptos CSS (t)

Conceptos Javascript (t)

React y alternativas (t)

✔ Check Point

Nos acercamos a React

Presentación de la sección

Hola Mundo React! (en CodeSandbox)

Grupo de estudiantes

Instalamos el entorno

Presentación de la sección

Contenido de la sección

Instalamos Node.js (h)

Instalamos VSCode (h)

Instalamos un plugin para VSCode (h)

Utilización de la terminal de VSCode (h)

Checkpoint

Creación de una aplicación: Pasos iniciales

Presentación de la sección

Creamos la estructura de la app: "npx"

Analizamos el package.json (t)

¿Qué pasa detrás del comando "npm start"? (t)

Probamos el "hot reload" (t)

Entendemos el Index.html

Construyendo el Index.js

Vamos a utilizar la extensión JSX ¿Por qué? (t)

¿Qué es JSX? (t)

Entendiendo los pasos para crear componentes

Creamos de App.js

ES6: Arrow Functions (t)

Conectamos App.js dentro de Index.js

Encontrando errores: debugging básico

Checkpoint

Aplicación "Calculadora" (CalcApp)

Presentación de la sección

Esquema de la aplicación

Crear archivo CSS e importarlo

Utilización de className

Patrón SOLID (aún no lo aplicamos)

Components en CalcApp

Presentación de la sección

Creamos componente Result

Orden de renderización y Debugger

Pasar información entre componentes: Propiedades

React-Dev-Tools (h)

Pasamos la prop value desde App.Js

Utilizamos la prop dentro del componente

ES: Destructuring (t)

Destructuring aplicado al componente

Instalación de PropTypes

Resolver problemas en la instalación de paquetes (t)

Validación básica con PropTypes

Establecemos propiedades por defecto

Esquema del componente Button

Estructura del componente Button

Pasamos propiedades al componente

onClick handler en Button

PropTypes en Button

Simplificación de sintaxis

Planificación componente MathOperations (p)

Creación de componente MathOperations

Evento onClick para MathOperations

Planificación componente Functions (p)

Creación de componente Funcions

Utilización de propiedad Type y Css asociado

Refactor de Button en carpeta

Planificación componente Numbers (p)

Creación del componente Numbers

DRY Dont Repeat Yourselft (t)

DRY aplicado: renderButtons

ES6 Función Map (t)

Utilizando la función map en renderButtons

Propiedad Key (t)

Utilizamos la propiedad Key

Hook useState, Template literals, Lodash y ternario

Presentación de la sección

Cómo funciona la calculadora (p)

Cómo funciona la calculadora - en ejecución (p)

Hooks: useState (t)

Usamos el useState I

Usamos el useState II

useState con Array Destructuring

Proceso de renderizado y burbujeo (t)

Teoría actualización react render

Agregamos funcionalidad a la app

ES: Template Literals (t)

Utilizamos Template Literals en la app

Funciones + - / * [del] - Primer paso

Validación con condicional “if”

Utilización de eval

Linter: Eliminar warning de eval

Expresiones Regulares o RegExp (t)

Lodash e instalación parcial

Utilización de Lodash.words

Mejorando la calculadora

Utilización operador ternario

Operador Ternario (t)

Código fuente y cómo obtenerlo

Repaso

Deploy con Firebase

Presentación de la sección

Código de la aplicación

Preparar nuestra aplicación para productivo (serve)

Build de la aplicación

Comunicación de la app con el server (t)

Firebase-tools (instalación)

Login en firebase

Firebase init

Creación de proyecto en firebase

Vincular proyecto con firebase

Deploy

WeatherApp con StoryBook y MaterialUI!

Presentación de la sección

Creación de la aplicación

Instalación de Material-UI

Presentación de story-book

Instalar code snippet plugin

Instalación de story-book

Creación de componente CityInfo

Typography

Agregar stories a componente CityInfo

Agregar estilo a CityInfo

Instalar fuente roboto

Test Unitarios y TDD

Presentación de la sección

Test automáticos

Creación de un test unitario

Arrange y Act en el test de CityInfo

Assert en el test CityInfo

Revisión test CityInfo

Creación de componente Weather con test y stories

TDD

Instalación de plugin de Jest

Instalo react-icons y agrego icono de clima

Context provider en React Icons

Agrego parametro state a Weather

Resolver componente en base al state

Adecuamos stories y test

Plan de componente CityList

Creación de componente CityList y estructura

Incorporamos Weather y CityInfo en el CityList

Agregamos ejemplos a stories de CityList

Agregamos test a CityList

Mejora en encapsulamiento con index

Creación de index y export default

Diseño responsivo: Grid Layout

Presentación de la sección

La importancia del diseño responsivo

Agrego Grid a componente CityList

Agrego Grid a componente CityList - testeo visual

Instalación de AddOn a storybook para ViewPort

Agrego validacion PropOneOf a Weather

Agregar evento a CityList utilizando TDD

Agrego evento click item a componente CityList

Función que retorna función

Agrego evento click a stories del componente CityList

Creación de componente WeatherDetails

Test unitario de WeatherDetails

Creación de componente ForecastItem

Agrego icono a ForecastItem render

Creación de componente IconState

Agrego tarea de test a ForecastItem

Creacion de componente Forecast

Validacion con propType shape

Creación de stories de Forecast

Creacion de test en Forecast

Gráficos estadísticos: ReCharts

Presentación de la sección

Presentación de Recharts

Instalacion de recharts

Creacion de estructura de componente ForecastChart

Agregamos data de ejemplo para ForecastChart

Agrego validación de ForecastChart

Agregamos el LineChart dentro de ForecastChart

React-Router: Router, Switch, Link y useHistory

Presentación de la sección

Creación de pages

Instalación de React router dom

Re-Creacion de componente App

Incorporacion de React Router en App

Presentacion de Link

Utilización de Link en el contexto de la aplicación

Incorporacion de pages a App

Utilización de useHistory

Incorporación de CityList en MainPage

Centro contenido de App

Creación de index en ForecastChart

Creación de page City

Agregando ResponsiveContainer a ForecastChart

Haciendo responsive componente Forecast

Mejora visual de Weather

Ajustes visuales en CityPage

Ajustes visuales en CityList

Utilización de "children"

Presentación de la sección

Creación de componente AppFrame

Agrego estructura de AppFrame

Agrego children a AppFrame

Fix visual AppFrame

Agrego AppFrame a MainPage

Agrego AppFrame a CityPage (ejercicio)

¡Más Hooks! useRef y useEffect

Presentación de la sección

Instalación de Vanta y Three

Creación de componente WelcomeScreen

Utilización de useRef

Utilización de useEffect

Interacción de useState y useEffect

Utilización de dependencias de useEffect

Activo efecto clouds de Vanta

Método de limpieza de useEffect

Ejercicios y más detalles

Incorporación de WelcomeScreen a WelcomePage

Utilización de children dentro de WelcomeScreen

Agrego zona central en el Welcome

Mejoramos la página de bienvenida

Agregamos el link de entrada en la pagina de bienvenida

Detalles Css sobre pagina bienvenida

Page 404

Código

Postman, Axios y Promises

OpenWeatherMap

Postman

Preparando los nuevos parámetros

useState y manejo del undefined

fetch y axios

Promises y response de axios

setState con callback 1

setState con callback 2

setState con callback 3

setState con callback 4

Agregamos countryCode

Adecuación del state

Corregimos test y storybooks

State desde el servidor

Convert-Units, Skeleton y Async y Await

Convert-units

Presentación de skeleton

Uso de skeleton

Tratamiento del error

Usando Alert para mostrar el error

Async y Await

DRY Caso: CityCode

Componentes del tipo clase

Class components

Estructura básica de class component

Clases Utilización de props

Clases Utilización de función

Clases Utilización de state

Clases modificación del state

Component did mount

Component did update

Component willUnmount

ErrorBoundary

Presentación de funcionamiento de ErrorBoundary

Hacemos funcionar ErrorBoundary

componentDidCatch

Routing con useParams y StrictMode

Pasamos city and countryCode en handler

Qué es el StrictMode (y por qué desactivarlo)

Cambio de url en base a parámetros

Hook useParams render

Utilización de convert-units con min y max

Datos para el pronóstico extendido

Custom Hooks y modularización de código

Presentación de hooks personalizados

Creamos custom hook useCityList

Custom hook de CityPage

Contemplamos dia sin datos de temperatura

Extracción del hook de CityPage

getWeatherUrl

getForecastUrl

toCelsius

useVanta custom hook

Modularización, desacoplamiento y hook useDebugValue

Planificación de funciones de transformación

Función transformación getAllWeather

Función trasnsformación getChartData

Función transformación getForecastItemList

Indicador de progreso LinearProgress

Hook useDebugValue

Creación de serviceCities

Reutilización de hook useCityList

Agregando los datos que faltan

Validación de estado

La importancia del hook useMemo

Análisis del problema

Resolución ingenua al problema

Hook useMemo

Subiendo el estado: Estado global

Donde se guarda el estado

Estrategia de resolución manejo del estado

Subiendo el estado

Distribuyendo estado en los componentes

Función onSetAllWeather

Usando useMemo para mejorar eficiencia

Análisis: ¿dónde esta el estado después de las modificaciones?

Componentes resilientes y hook useCallback

Chequeo de existencia de dato de clima

Entendiendo qué sucede

Componentes resilientes: No parar el flujo de datos render

Resolución del problema

Entendiendo la resolución

Hook useCallback

Actions

Subimos estado del pronóstico a App

Agregamos el dato de la ciudad

Terminando los callback

Adecuando el dato de forecast

Mejora en eficiencia evitamos peticiones

Link al sandbox React Eficiencia

Estados complejos: hook useReducer

Presentación de useReducer

Presentación en código de useReducer

Distribuyendo el dispatch

Establezco el initialValue

Función reducer

Análisis del useReducer

CodeSandbox de useReducer

Link al sandbox React useReducer

Como mejorar la eficiencia: React.memo y profiling

Eficiencia React.memo

Memo y problema de estado compartido

Api Profiler

React Dev Tools Profiler

Profiling del componente CityList

Creación de CityListItem y utilización de React Memo

DisplayName y workaround

Encontrando el culpable

Mejora eficiencia renderización de lista

Mejora eficiencia App con useCallback

PureComponent

Eficiencia: Ojo con los detalles

Concepto de inmutabilidad

Context Provider y hook useContext

ContextProvider y useContext

Presentación por qué aplicamos Context

Creación de WeatherContext

Consumo WeatherContext con useContext

Encapsulo el Contexto en WeatherContext

Mejora encasulamiento y semántica con Custom Hooks

TypeScript: Fundamentos

Presentación de TypeScript

Agrego typescript al proyecto

Activando Typescript

Hacemos el tipado de App

Intrinsec Elements

Uso de Type y generics

Manejo de propiedades undefined

Tipado de función en Button

Consumo de tipo definido en otro component

Tipado de MathOperations

Tipado de Functions

Algunos conceptos básicos extra sobre TS

Nueva sección

Nuevas clases


Reviews

G
Gabriel22 December 2020

La elección del curso ha sido buena, aunque los conceptos a veces son difíciles de coger, pero es algo personal.


2725260

Udemy ID

12/28/2019

Course created date

7/14/2020

Course Indexed date
Bot
Course Submitted by