Webinar - Iniciación a React para desarrollo de interfaces de usuario
3 recomendaciones1,156 vistas
El documento es una introducción a React, una librería de JavaScript para el desarrollo de interfaces de usuario, enfocándose en la creación de componentes, gestión del estado y el ciclo de vida de los mismos. Se mencionan los pasos iniciales para empezar un proyecto en React, así como conceptos clave como el flujo de datos unidireccional y el virtual DOM. Además, se explica la diferencia entre componentes con estado y sin estado, y cómo manejar eventos en React.
Webinar - Iniciación a React para desarrollo de interfaces de usuario
- 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)
- 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"!!
- 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