Slide 1

Slide 1 text

React.js

Slide 2

Slide 2 text

Sergio Gianazza @sgianazza github.com/gianu Developer

Slide 3

Slide 3 text

React.js O sobre como me convertí en el primer viajero en el tiempo

Slide 4

Slide 4 text

2014

Slide 5

Slide 5 text

2044

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

DOM

Slide 9

Slide 9 text

DOOM

Slide 10

Slide 10 text

1983

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

2014

Slide 14

Slide 14 text

React.js

Slide 15

Slide 15 text

Libreria para construir interfaces de usuario

Slide 16

Slide 16 text

V del MVC

Slide 17

Slide 17 text

DOM

Slide 18

Slide 18 text

Virtual DOM

Slide 19

Slide 19 text

Diff entre arboles Eficiente

Slide 20

Slide 20 text

O(n^3)

Slide 21

Slide 21 text

O(n^3) O(n)

Slide 22

Slide 22 text

Magic!

Slide 23

Slide 23 text

O(n^3) O(n)

Slide 24

Slide 24 text

One-way data flow

Slide 25

Slide 25 text

Componentes

Slide 26

Slide 26 text

Propiedades & Estados

Slide 27

Slide 27 text

Comportamiento & Renderizado

Slide 28

Slide 28 text

Renderizado To JSX or not to JSX

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Component Lifecycle

Slide 32

Slide 32 text

componentWillMount

Slide 33

Slide 33 text

componentDidMount

Slide 34

Slide 34 text

componentWillReceiveProps

Slide 35

Slide 35 text

shouldComponentUpdate

Slide 36

Slide 36 text

componentWillUpdate

Slide 37

Slide 37 text

componentDidUpdate

Slide 38

Slide 38 text

componentWillUnmount

Slide 39

Slide 39 text

¿Como se ve esto funcionando?

Slide 40

Slide 40 text

Budget Bleed

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

¿Que es lo que sigue?

Slide 44

Slide 44 text

Gracias! http://github.com/gianu/budget_bleed @sgianazza Historia basada en “the man who folded himself” de David Gerrold y “Atopia” de Matthew Mather.