Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webinar - Iniciación a React para desarrollo de interfaces de usuario

447 views

Published on

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

Published in: Internet
  • Be the first to comment

Webinar - Iniciación a React para desarrollo de interfaces de usuario

  1. 1. Miguel Angel Alvarez Iniciación a React @midesweb
  2. 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. 3. Qué es React
  4. 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. 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. 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. 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. 8. Primeros pasos
  9. 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. 10. Primeros pasos Desarrollar un componente
  11. 11. Primeros pasos Importamos el componente Usamos el componente Usar un componente
  12. 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. 13. Primeros pasos Podemos asociar manejadores de eventos de manera declarativa Eventos
  14. 14. Primeros pasos Podemos asociar manejadores de eventos de manera declarativa Eventos Los manejadores son métodos del propio componente
  15. 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. 16. Gestión del estado
  17. 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. 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. 19. Gestión del estado Componente con estado
  20. 20. Gestión del estado Componente con estado
  21. 21. Gestión del estado Componente con estado
  22. 22. Ciclo de vida
  23. 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. 24. Gracias Miguel Angel Alvarez insight@insightcreativos.com 649 76 76 31 @midesweb

×