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