# React Puro - 19

## React puro con Hooks

|             |                                                                                          |
| ----------- | :--------------------------------------------------------------------------------------: |
| Versión     |                                       React 16.13.x                                      |
| Repositorio | [github.com/zeroidentidad/react-puro-19](https://github.com/zeroidentidad/react-puro-19) |

### - Hola mundo

* [react-hello](1-hola_mundo/holamundo)

### - JSX

* [Qué es y por qué JSX](2-jsx/jsx)
* [Trabajando con JSX](2-jsx/trabajando_jsx)
* [Ejemplo componente Tweet](2-jsx/tweet)

### - Props

* [Las Props](3-props/props)
* [Pasar Props](3-props/pasar_props)
* [Recibir Props](3-props/recibir_props)
* [Comunicación con componentes Padre](3-props/comunicacion_componente_padre)
* [Ejemplo Tweet con Props](3-props/tweet_props)

### - PropTypes

* [Documentación y depuración incluida](4-proptypes/doc_debug_incluida)
* [Cómo validar, formas comunes](4-proptypes/formas_validar)
* [Ejemplo Tweet con PropTypes](4-proptypes/tweet_proptypes)
* [PropTypes como documentación](4-proptypes/doc_proptypes)

### - Children

* [Los Children](5-children/children)
* [Diferentes tipos de Children](5-children/tipos_children)
* [Manejando uso Children](5-children/manejo_children)
* [PropTypes para Children](5-children/proptypes_children)
* [Personalizar Children antes de renderizar](5-children/personalizar_children)

### - Practica: GitHub File List

* [Parte inicial](6-github-file-list/parte_1)
* [Parte 2: la Prop 'key'](6-github-file-list/parte_2)

### - State en Clases

* [El state](7-state-en-clases/state)
* [Ejemplo inicial: un contador](7-state-en-clases/ejemplo_contador)
* [setState es Asincrónico](7-state-en-clases/setstate_asincrono)
* [Fusión superficial vs profunda](7-state-en-clases/fusion_superficial_profunda)
* [Sintaxis limpia en Class Components](7-state-en-clases/sintaxis_limpia_class_components)
* [Manejo de eventos](7-state-en-clases/manejo_eventos)

### - Ciclo de vida del componente

* [El ciclo](8-ciclo-vida-componente/ciclo)
* [Fases](8-ciclo-vida-componente/fases)
* [Montaje](8-ciclo-vida-componente/montaje)
* [Representación](8-ciclo-vida-componente/representacion)
* [Desmontaje](8-ciclo-vida-componente/desmontaje)
* [Manejo de errores](8-ciclo-vida-componente/manejo_errores)

### - Solicitudes API en React

* [Intro](9-requests-api/intro)
* [Eligir libreria HTTP](9-requests-api/libreria_http)
* [Obtener datos y mostrarlos](9-requests-api/obtener_mostrar_datos)

### - State en Funciones

* [Intro Hooks](10-state-en-funciones/intro_hooks)
* [El useState Hook](10-state-en-funciones/usestate_hook)
* [La "magia" de los Hooks](10-state-en-funciones/magia_hook)
* [Reglas de los Hooks](10-state-en-funciones/reglas_hooks)
* [Actualizar State basado en State anterior](10-state-en-funciones/actualizar_state_de_state_anterior)
* [State como un Array](10-state-en-funciones/state_array)
* [State como un Objeto](10-state-en-funciones/state_objeto)

### - Pensando en uso del State

* [Qué colocar en el State](11-pensando-uso-state/que_colocar_en_state)
* [Pensando declarativamente](11-pensando-uso-state/pensando_declarativamente)
* [Dónde mantener el estado](11-pensando-uso-state/donde_mantener_estado)
* ["Tipos" de componentes](11-pensando-uso-state/tipos_componentes)

### - Controles de entrada

* [Entradas controladas](12-controles-entrada/entradas_controladas)
* [Entradas NO controladas](12-controles-entrada/entradas_no_controladas)

### - El Hook useReducer

* [Qué es un Reducer?](13-hook-usereducer/que_es_reducer)
* [Un ejemplo más practico](13-hook-usereducer/ejemplo_practico)
* [Entonces, Redux murió?](13-hook-usereducer/redux_muerto)

### - El Hook useEffect

* [Intro useEffect](14-hook-useeffect/intro_useeffect)
* [Límite cuando se ejecuta un Effect](14-hook-useeffect/limite_useeffect)
* [Solo ejecución en montaje y desmontaje](14-hook-useeffect/ejecutar_en_montaje_demontaje)
* [Obtener datos (Fetch) con useEffect](14-hook-useeffect/fetch_datos_useeffect)
* [Re-obtener datos (Re-Fetch) cuando cambian](14-hook-useeffect/re-fetch_datos_useeffect)
* [Hacer cambios visibles del DOM](14-hook-useeffect/visible_cambios_dom)

### - La API Context

* [Intro API Context](15-api-context/intro_api_context)
* [Ejemplo perforación de props](15-api-context/drilling_props)
* [Patrón "Slots"](15-api-context/patron_slots)
* [Usando React API Context](15-api-context/uso_react_api_context)
* [Patrón "Render Props"](15-api-context/patron_render_props)
* [Otros Patrones de Context](15-api-context/otros_patrones_context)
* [El Hook useContext](15-api-context/hook_usecontext)

### - Anexos complementos

* [Ref. Awesome React](https://github.com/enaqx/awesome-react)
* [Ref. Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks)
* [Ref. Awesome React GraphQL](https://github.com/hasura/awesome-react-graphql)
