Tweet
Tweet

Slide 1

Slide 1 text

©2019 VMware, Inc. Introducción a ReactJS Crea tus interfaces utilizando componentes Ángel M Miguel

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 ©2019 VMware, Inc. Qué es React? ReactJS es una librería para desarrollar Interfaces de usuario

Slide 4

Slide 4 text

4 ©2019 VMware, Inc. Qué es React? Se basa en componentes, creando una vista modular y reusable.

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

6 ©2019 VMware, Inc. Componentes Los componentes web son otra forma de resolver el problema de crear UIs escalables.

Slide 7

Slide 7 text

7 ©2019 VMware, Inc. Componentes en ReactJS

Slide 8

Slide 8 text

8 ©2019 VMware, Inc. Qué es un componente?

Slide 9

Slide 9 text

9 ©2019 VMware, Inc. Qué es un componente? Propiedades de un componente

Slide 10

Slide 10 text

10 ©2019 VMware, Inc. Qué es un componente? Estado de componente

Slide 11

Slide 11 text

11 ©2019 VMware, Inc. Composición de componentes WallComponent = N * BrickComponent

Slide 12

Slide 12 text

12 ©2019 VMware, Inc. Composición de componentes HouseComponent = N * BrickComponent + DoorComponent

Slide 13

Slide 13 text

13 ©2019 VMware, Inc. Composición de componentes

Slide 14

Slide 14 text

14 ©2019 VMware, Inc. Ejemplo Search Name, Team... Name Team Carlos Marketing Carlos WebDev Carlos Ops Carlos SRE

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 ©2019 VMware, Inc. Específicos Cada componente tiene un propósito

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

18 ©2019 VMware, Inc. Inpependientes Los componentes solo son conscientes de sus propiedades y su estado Properties Renderiza.on STATE Propiedades Representación

Slide 19

Slide 19 text

19 ©2019 VMware, Inc. Encapsulados ● Código fuente ● Estilos ● Tests

Slide 20

Slide 20 text

20 ©2019 VMware, Inc. Reusables

Slide 21

Slide 21 text

21 ©2019 VMware, Inc. Cómo funciona ReactJS?

Slide 22

Slide 22 text

22 ©2019 VMware, Inc. React Reconciliación Renderización

Slide 23

Slide 23 text

23 ©2019 VMware, Inc. Reconciliación DOM Virtual DOM

Slide 24

Slide 24 text

24 ©2019 VMware, Inc. Reconciliación

Slide 25

Slide 25 text

25 ©2019 VMware, Inc. Virtual DOM El Virtual DOM es una estructura inmutable. Las operaciones sobre estas estructuras están muy optimizadas.

Slide 26

Slide 26 text

26 ©2019 VMware, Inc. Renderización Convertir el Virtual DOM en HTML

Slide 27

Slide 27 text

27 ©2019 VMware, Inc. Renderización Convertir el Virtual DOM en una representación visual

Slide 28

Slide 28 text

28 ©2019 VMware, Inc. Renderización Virtual DOM

Slide 29

Slide 29 text

29 ©2019 VMware, Inc. React Reconciliación Renderización • ReactDOM • ReactGL • ReactVR • ReactCLI • React

Slide 30

Slide 30 text

30 ©2019 VMware, Inc. Código de un componente

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

32 ©2019 VMware, Inc. Componente de Clase

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

34 ©2019 VMware, Inc. Renderizando tu componente

Slide 35

Slide 35 text

35 ©2019 VMware, Inc. Propiedades

Slide 36

Slide 36 text

36 ©2019 VMware, Inc. Propiedades

Slide 37

Slide 37 text

37 ©2019 VMware, Inc. Estado

Slide 38

Slide 38 text

38 ©2019 VMware, Inc. Modificar Estado

Slide 39

Slide 39 text

39 ©2019 VMware, Inc. Modificar Estado

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41 ©2019 VMware, Inc. Ciclo de vida de un componente Mount Update Unmount

Slide 42

Slide 42 text

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)

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

44 ©2019 VMware, Inc. Componentes funcionales • Inicializar y almacenar estado • Actualizar el estado • Mostrarlo con JSX

Slide 45

Slide 45 text

45 ©2019 VMware, Inc. Componentes funcionales

Slide 46

Slide 46 text

46 ©2019 VMware, Inc. Componentes funcionales

Slide 47

Slide 47 text

47 ©2019 VMware, Inc. Componentes funcionales

Slide 48

Slide 48 text

48 ©2019 VMware, Inc. Componentes funcionales

Slide 49

Slide 49 text

49 ©2019 VMware, Inc. Componentes funcionales

Slide 50

Slide 50 text

50 ©2019 VMware, Inc. Dos cosas antes de terminar ✌

Slide 51

Slide 51 text

51 ©2019 VMware, Inc. Meetups

Slide 52

Slide 52 text

‹#› 52 ©2019 VMware, Inc. Bitnami Make Awesome Sofware Available to Everyone

Slide 53

Slide 53 text

53 ©2019 VMware, Inc. The team As part of VMware, we have offices around all the World!

Slide 54

Slide 54 text

54 ©2019 VMware, Inc. We’re hiring! We’ll be opening different positions during the next months

Slide 55

Slide 55 text

©2019 VMware, Inc.