Readme_es.md

React Hooks By Example

Conjunto de ejemplos paso a paso sobre React Hooks, desde cero hasta casos avanzados.

Cada ejemplo:

• Se centra en un tema (simple y directo).
• Contiene un Readme_es.md con una guía paso por paso para reproducirlo.

Ejemplos implementados

Listado de ejemplos:

• 00-boiler-plate: punto de partida, simplemente crea un proyecto vacío con create-react-app (todos los ejemplos tomarán este ejemplo como punto de partida).
• 01-use-state: añadiendo estado (elemento simple) a un componente funcional.
• 02-use-state-object: añadiendo estado (objeto) a un componente funcional.
• 03-component-did-mount: ejecutando algunas operaciones cuando un componente funcional se monta.
• 04-component-unmount: ejecutando código de cleanup cuando un componente funcional se desmonta.
• 05-mount-did-update: hookeando los eventos de montaje y actualización de componentes.
• 06-ajax-field-change: lanzando una llamada ajax siempre que un determinado campo se actualiza.
• 07-custom-hooks: creando nuestro propio hook, genial para simplificar componentes y obtener recursos reutilizables.
• 08-pure-component: creando componentes funcionales puros.
• 09-pure-component-callback: creando componentes funcionales puros que incluyen propiedas de funciones en sus props.
• 10-use-reducer: usando el hook useReducer.
• 11-use-context: usando el hook useContext para acceder al contexto en una línea de código.
• 12-set-state-func: como actualizar con setState asegurándonos que estamos usando el valor más actualizado del mismo.
• 13-async-closure: caso avanzado, obtener información reciente de useState en los callbacks.
• 14-useref-dom: usando useRef para acceder a un elemento hijo del DOM.
• 15-promise-unmounted: detectando si el componente está montado/desmontado para evitar realizar la actualización del estado de un componente no montado.
• 16-memo-predicate: mejorando el rendimiento del renderizado hookeando 'shouldComponentUpdate'.
• 17-use-debug-value: usando el hook interno useDebugValue.
• 18-why-did-you-update: implementando un custom hook para evitar renderizados innecesarios.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.

Y si tienes ganas de meterte una zambullida en el mundo devops apuntate nuestro Bootcamp devops online Lemoncode