A basic introduction to the goals and principles behind the popular ReactJS library

1. discover
React
Massimo Iacolare
@iacoware

2. Questions?

3. react
Hello

4. react
a library to build
user interfaces
by Facebook

5. 2013
may

6. 2013 open source
may

7. 2013 open source
may
2011 production

8. facebook

9. facebook
instagram
airbnb
new york times
khan academy

11. yahoo
netflix
codecademy
flipboard
and many others…paypal

12. battle
tested

14. skeptical
Syndrome
reaction

15. Brace yourself

16. Brace yourself

17. Brace yourself
Wat?

18. html + js

19. Mixing concerns
==
html + js

20. Mixing concerns
==
Really?
html + js

21. js coupled to html
inevitably

22. highly cohesive
maybe?
js coupled to html
inevitably

23. react
module
high cohesive
component

24. concerns
separation of

25. concerns
separation of
==
components
separation of

26. assumptions will
be challenged

27. open mind
keep an
assumptions will
be challenged

28. YAWODS?
Why should I learn

29. YAWODS?
Why should I learn
yet another way of doing stuff

30. better ux
quest to

31. frontend
ambitious

32. today’s challenges
complexity
high performance
accidental
everywhere

33. explicit over implicit
always seek predictability
declarative over imperative
keep
complexity
accidental
low

34. react
pillars

35. everything is a
component

36. components
data
+

37. components
data
+
lots of them

38. shaken,
not stirred
components
data
+
lots of them

39. shaken,
not stirred
components
data
+
app
lots of them

40. components
all the
way
down

41. todo
app

42. render()
only
function
requirement

43. lifecyclecomponent
componentWillMount()
componentDidMount()
componentWillReceiceProps()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()

44. trasform
into
jsx
js
to

45. let’s talk about jsx
expressions - events - styles
jsx looks like an abomination

46. embedded
components
jsx
↓
smaller
SRP & resusability
↓
++

47. How do we
pass data to
components?

48. Two kinds
of data
props & state

49. this.props

50. type checkoptional

51. immutable can’t touch it
makes tracking
down bugs easier
very easy to
reason about
props
passed from parent
this.props to read
stateless component

52. How data flows

53. How data flows
props passed
from parent
pass callbacks to
setup a simple
communication
mechanism

54. this.state

55. mutable
State
created inside comp
this.state to read
stateful component
this.setstate to write

56. How data flows

57. How data flows

58. How data flows
state can
become props
state is private
by default
data flows down
callbacks flow up

59. props
immutable
passed from parent
stateless comp.
state
mutable
created inside comp.
stateful comp.
this.props to read this.state to read
this.setState() to write
why?

60. is evil
mutable state
because

61. is evil
mutable state
source of
complexity
is evil
because

62. ok cool but…
data changes?
what happens when

63. React

64. doesn’t use
React
two-way
databinding

65. two-way
databinding

66. lead to
two-way
databinding
cascading
updates

67. two-way
databinding

68. implict way
two-way
databinding
mutate
state

69. is evil
mutable state
remember?

70. is evil
mutable state
source of
complexity
is evil
remember?

71. every time setState()

72. every time setState()
re-render everything

73. every time setState()
re-render
simpler
everything
mental model

74. every time setState()
re-render
simpler
everything
mental model
re-render…

75. every time setState()
re-render
simpler
everything
mental model
Wat?re-render…

76. virtual dom to the rescue

77. VDOM facts

78. render return virtual dom…
VDOM facts

79. render return virtual dom…
…an in-memory, lightweight
representation of the DOM
VDOM facts

80. render return virtual dom…
…an in-memory, lightweight
representation of the DOM
react is write-only to the DOM
VDOM facts

81. render()

82. render()
return a
description
of the UI

83. state describe
introduction to reactjs

84. for every
change of
state describe
introduction to reactjs

85. for every
change of
state describe
the whole
user interface
introduction to reactjs

86. data

87. render(data)

88. render(data uispecification
)

89. declarative, stateless
approach
over
imperative, stateful api

90. 1. everything is a component
Recap
3. think in state, DOM will
follow
4. virtual dom is awesome
2. how data flows

91. flux
Wait there’s more
isomorphic app
immutable-js
relay-graphql
css in js
baobab
react-native

92. time
coding
react playground
discover react @apericoder
clone and play!
discover react @Bologna JS

93. thanks!
That’s all