Presentación del webinar Iniciación a React para desarrollo de interfaces de usuario, en el que hemos profundizado en la librería React, que permite desarrollar interfaces de usuario y aplicaciones frontend basadas en JavaScript: características, herramientas disponibles, desarrollo de componentes, etc.. Vídeo íntegro del webinar disponible en https://www.youtube.com/user/Arsys Más información en https://www.arsys.es/blog

1. Miguel Angel Alvarez
Iniciación a React
@midesweb

2. Qué veremos hoy
▪ Índice
o Qué es React
o Iniciar un proyecto React
o Desarrollo de componentes con React
• Propiedades
• Eventos
o Gestión del estado
• Qué es el estado
• Componentes sin estado
• Componentes con estado
o Ciclo de vida de los componentes

3. Qué es React

4. Qué es React
Librería Javascript para el desarrollo de interfaces de usuario, de código libre, creada
por originalmente por Facebook.
- Basada en componentes
- Alto rendimiento
- Fácil de usar
React

5. Qué es React
Un componente es una pieza reutilizable que tiene encapsulada:
- Una presentación
- Una funcionalidad
Unos componentes se basan en otros y colaboran entre sí para resolver las necesidades
de las aplicaciones.
Componentes
https://unsplash.com/

6. Qué es React
React implementa un flujo de datos unidireccional.
- Al actualizarse el estado del componente se actualizan automáticamente las
vistas.
- Los datos pueden viajar desde los componentes padres hacia los hijos
Flujo de datos

7. Alto rendimiento
Virtual DOM
Una de las principales características de
React es su velocidad. En parte lo
consigue gracias al Virtual DOM.
Jerarquía DOM. Wikipedia
Virtual DOM (en memoria) DOM real (en el navegador)

8. Primeros pasos

9. Primeros pasos
● Instalar NodeJS (8.10.0 o superior) https://nodejs.org
● Instalar Git https://git-scm.com/
● npx create-react-app my-app
● cd my-app
● npm start
https://github.com/facebook/create-react-appCreate React App

10. Primeros pasos
Desarrollar un componente

11. Primeros pasos
Importamos el componente
Usamos el componente
Usar un componente

12. Primeros pasos
Podemos cargar datos en los componentes por medio de sus propiedades.
Propiedades
Al implementar el componente puedo usar el valor de las propiedades seteadas

13. Primeros pasos
Podemos asociar manejadores de eventos de manera declarativa
Eventos

14. Primeros pasos
Podemos asociar manejadores de eventos de manera declarativa
Eventos
Los manejadores son métodos del propio componente

15. Primeros pasos
Podemos asociar manejadores de eventos de manera declarativa
Eventos
Los manejadores son métodos del propio componente
Generalmente tendrás que
bindear el contexto para poder
acceder a "this"!!

16. Gestión del estado

17. Gestión del estado
▪ Componentes con estado
o Mantienen datos propios y los pueden cambiar a lo largo del tiempo.
o Estos componentes son capaces de enviar sus datos para que otros componentes los puedan usar
▪ Componentes sin estado
o No almacenan ni transforman ningún dato en particular.
o A través de propiedades podemos cargarles datos, que pueden mostrar en su vista, pero no los modifican.
Statefull / Stateless

18. Gestión del estado
Un estilo diferente de crear componentes a partir de una sencilla función
Los valores de las propiedades se obtienen con el parámetro de la función
Stateless function components

19. Gestión del estado
Componente con estado

20. Gestión del estado
Componente con estado

21. Gestión del estado
Componente con estado

22. Ciclo de vida

23. Ciclo de vida
El ciclo de vida de los componentes permite enganchar comportamientos en los
distintos momentos de la vida de un componente.
Ciclo de vida

24. Gracias
Miguel Angel Alvarez
insight@insightcreativos.com
649 76 76 31
@midesweb