React Puro - 19

React puro con Hooks

Versión	React 16.13.x
Repositorio	github.com/zeroidentidad/react-puro-19

- Hola mundo

• react-hello

- JSX

• Qué es y por qué JSX

• Trabajando con JSX

• Ejemplo componente Tweet

- Props

• Las Props

• Pasar Props

• Recibir Props

• Comunicación con componentes Padre

• Ejemplo Tweet con Props

- PropTypes

• Documentación y depuración incluida

• Cómo validar, formas comunes

• Ejemplo Tweet con PropTypes

• PropTypes como documentación

- Children

• Los Children

• Diferentes tipos de Children

• Manejando uso Children

• PropTypes para Children

• Personalizar Children antes de renderizar

- Practica: GitHub File List

• Parte inicial

• Parte 2: la Prop 'key'

- State en Clases

• El state

• Ejemplo inicial: un contador

• setState es Asincrónico

• Fusión superficial vs profunda

• Sintaxis limpia en Class Components

• Manejo de eventos

- Ciclo de vida del componente

• El ciclo

• Fases

• Montaje

• Representación

• Desmontaje

• Manejo de errores

- Solicitudes API en React

• Intro

• Eligir libreria HTTP

• Obtener datos y mostrarlos

- State en Funciones

• Intro Hooks

• El useState Hook

• La "magia" de los Hooks

• Reglas de los Hooks

• Actualizar State basado en State anterior

• State como un Array

• State como un Objeto

- Pensando en uso del State

• Qué colocar en el State

• Pensando declarativamente

• Dónde mantener el estado

• "Tipos" de componentes

- Controles de entrada

• Entradas controladas

• Entradas NO controladas

- El Hook useReducer

• Qué es un Reducer?

• Un ejemplo más practico

• Entonces, Redux murió?

- El Hook useEffect

• Intro useEffect

• Límite cuando se ejecuta un Effect

• Solo ejecución en montaje y desmontaje

• Obtener datos (Fetch) con useEffect

• Re-obtener datos (Re-Fetch) cuando cambian

• Hacer cambios visibles del DOM

- La API Context

• Intro API Context

• Ejemplo perforación de props

• Patrón "Slots"

• Usando React API Context

• Patrón "Render Props"

• Otros Patrones de Context

• El Hook useContext

- Anexos complementos

• Ref. Awesome React

• Ref. Awesome React Hooks

• Ref. Awesome React GraphQL