Introducción a ReactJS

Introducción a los conceptos principales de ReactJS y cómo crear tus primeros componentes con esta librería.

Transcript

1. ©2019 VMware, Inc. Introducción a ReactJS Crea tus interfaces utilizando componentes Ángel M Miguel
2. 2 ©2019 VMware, Inc. Desarrollador Full-Stack. Me encantan los videojuegos y los vinilos! Miembro del equipo técnico de VMware. @_angelmm https://angelmm.rocks
3. 3 ©2019 VMware, Inc. Qué es React? ReactJS es una librería para desarrollar Interfaces de usuario
4. 4 ©2019 VMware, Inc. Qué es React? Se basa en componentes, creando una vista modular y reusable.
5. 5 ©2019 VMware, Inc. Componentes En 2013, Brad Frost definió las interfaces como un sistema de partículas. http://bradfrost.com/blog/post/atomic-web-design/
6. 6 ©2019 VMware, Inc. Componentes Los componentes web son otra forma de resolver el problema de crear UIs escalables.
7. 7 ©2019 VMware, Inc. Componentes en ReactJS
8. 8 ©2019 VMware, Inc. Qué es un componente?
9. 9 ©2019 VMware, Inc. Qué es un componente? Propiedades de un componente
10. 10 ©2019 VMware, Inc. Qué es un componente? Estado de componente
11. 11 ©2019 VMware, Inc. Composición de componentes WallComponent = N * BrickComponent
12. 12 ©2019 VMware, Inc. Composición de componentes HouseComponent = N * BrickComponent + DoorComponent
13. 13 ©2019 VMware, Inc. Composición de componentes
14. 14 ©2019 VMware, Inc. Ejemplo Search Name, Team... Name Team Carlos Marketing Carlos WebDev Carlos Ops Carlos SRE
15. 15 ©2019 VMware, Inc. Por qué utilizar componentes? • Son pequeños y específicos. Son fáciles de predecibles y fáciles de testear • Son independientes y están encapsulados • Son muy reusables
16. 16 ©2019 VMware, Inc. Específicos Cada componente tiene un propósito
17. 17 ©2019 VMware, Inc. Específicos “The secret to efficiently building ‘large’ things is generally to avoid building them in the first place. Instead, compose your large thing out of smaller, more focused pieces” Addy Osmani (Google Engineer)
18. 18 ©2019 VMware, Inc. Inpependientes Los componentes solo son conscientes de sus propiedades y su estado Properties Renderiza.on STATE Propiedades Representación
19. 19 ©2019 VMware, Inc. Encapsulados • Código fuente • Estilos • Tests
20. 20 ©2019 VMware, Inc. Reusables
21. 21 ©2019 VMware, Inc. Cómo funciona ReactJS?
22. 22 ©2019 VMware, Inc. React Reconciliación Renderización
23. 23 ©2019 VMware, Inc. Reconciliación DOM Virtual DOM
24. 24 ©2019 VMware, Inc. Reconciliación
25. 25 ©2019 VMware, Inc. Virtual DOM El Virtual DOM es una estructura inmutable. Las operaciones sobre estas estructuras están muy optimizadas.
26. 26 ©2019 VMware, Inc. Renderización Convertir el Virtual DOM en HTML
27. 27 ©2019 VMware, Inc. Renderización Convertir el Virtual DOM en una representación visual
28. 28 ©2019 VMware, Inc. Renderización Virtual DOM
29. 29 ©2019 VMware, Inc. React Reconciliación Renderización • ReactDOM • ReactGL • ReactVR • ReactCLI • React
30. 30 ©2019 VMware, Inc. Código de un componente
31. 31 ©2019 VMware, Inc. Componentes en ReactJS Existen dos maneras de definir un componente de React: utilizando la sintaxis de clase o de función
32. 32 ©2019 VMware, Inc. Componente de Clase
33. 33 ©2019 VMware, Inc. JSX JSX es el lenguaje que define los elementos que se van a renderizar. Aunque lo parezca, no es ni una cadena de texto ni código HTML. Este código es una extensión del lenguaje JavaScript.
34. 34 ©2019 VMware, Inc. Renderizando tu componente
35. 35 ©2019 VMware, Inc. Propiedades
36. 36 ©2019 VMware, Inc. Propiedades
37. 37 ©2019 VMware, Inc. Estado
38. 38 ©2019 VMware, Inc. Modificar Estado
39. 39 ©2019 VMware, Inc. Modificar Estado
40. 40 ©2019 VMware, Inc. Ciclo de vida de un componente Cada vez que cambia una propiedad o el estado de un componente, se lanza el proceso de reconciliación y se comprueba si es necesario actualizarlo
41. 41 ©2019 VMware, Inc. Ciclo de vida de un componente Mount Update Unmount
42. 42 ©2019 VMware, Inc. Componentes funcionales Hasta principios de 2019, la principal diferencia entre la sintaxis de clase y función es que las segundas no tenían estado (stateless)
43. 43 ©2019 VMware, Inc. Componentes funcionales En Enero de 2019, se introdujeron los Hooks en React. Esto son funciones que extraen características de componentes como la gestión de estados
44. 44 ©2019 VMware, Inc. Componentes funcionales • Inicializar y almacenar estado • Actualizar el estado • Mostrarlo con JSX
45. 45 ©2019 VMware, Inc. Componentes funcionales
46. 46 ©2019 VMware, Inc. Componentes funcionales
47. 47 ©2019 VMware, Inc. Componentes funcionales
48. 48 ©2019 VMware, Inc. Componentes funcionales
49. 49 ©2019 VMware, Inc. Componentes funcionales
50. 50 ©2019 VMware, Inc. Dos cosas antes de terminar ✌
51. 51 ©2019 VMware, Inc. Meetups
52. ‹#› 52 ©2019 VMware, Inc. Bitnami Make Awesome Sofware Available to Everyone
53. 53 ©2019 VMware, Inc. The team As part of VMware, we have offices around all the World!
54. 54 ©2019 VMware, Inc. We’re hiring! We’ll be opening different positions during the next months
55. ©2019 VMware, Inc.