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