discover react
TRANSCRIPT
discover
ReactMassimo Iacolare@iacoware
Questions?
reactHello
reacta library to builduser interfaces
by Facebook
2013may
2013 open sourcemay
2013 open sourcemay
2011 production
facebookinstagram
airbnbnew york timeskhan academy
yahoo
netflixcodecademyflipboard
and many others…paypal
battletested
skeptical
Syndromereaction
Brace yourself
Brace yourself
Brace yourself
Wat?
html + js
Mixing concerns==
html + js
Mixing concerns==
Really?
html + js
js coupled to htmlinevitably
highly cohesivemaybe?
js coupled to htmlinevitably
react
modulehigh cohesive
component
concernsseparation of
concernsseparation of
==components
separation of
assumptions will be challenged
open mindkeep an
assumptions will be challenged
YAWODS?Why should I learn
YAWODS?Why should I learn
yet another way of doing stuff
better uxquest to
frontendambitious
today’s challenges
complexity
high performanceaccidental
everywhere
explicit over implicit
always seek predictability
declarative over imperative
keep
complexityaccidental
low
react
pillars
everything is a
component
components
data+
components
data+
lots of them
shaken, not stirred
components
data+
lots of them
shaken, not stirred
components
data+
applots of them
componentsall the way
down
todo app
render()
only
function
requirement
lifecyclecomponentcomponentWillMount()
componentDidMount()
componentWillReceiceProps()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
trasform
intojsx
jsto
let’s talk about jsx
expressions - events - stylesjsx looks like an abomination
embedded
components
jsx↓
smaller
SRP & resusability↓
++
How do we pass data to
components?
Two kinds of data
props & state
this.props
type checkoptional
immutable can’t touch it
makes tracking down bugs easier
very easy to reason about
propspassed from parentthis.props to readstateless component
How data flows
How data flowsprops passed from parent
pass callbacks to setup a simple
communication mechanism
this.state
mutable
Statecreated inside comp
this.state to read
stateful componentthis.setstate to write
How data flows
How data flows
How data flows
state can become props
state is private by default
data flows down callbacks flow up
propsimmutable
passed from parent
stateless comp.
statemutable
created inside comp.
stateful comp.
this.props to read this.state to read this.setState() to write
why?
is evilmutable statebecause
is evilmutable state
source of complexity
is evilbecause
ok cool but…
data changes?what happens when
React
doesn’t use
React
two-way databinding
two-way databinding
lead to
two-way databinding
cascading updates
two-way databinding
implict way
two-way databinding
mutate state
is evilmutable stateremember?
is evilmutable state
source of complexity
is evilremember?
every time setState()
every time setState()
re-render everything
every time setState()
re-render
simpler
everything
mental model
every time setState()
re-render
simpler
everything
mental model
re-render…
every time setState()
re-render
simpler
everything
mental model
Wat?re-render…
virtual dom to the rescue
VDOM facts
render return virtual dom…
VDOM facts
render return virtual dom…
…an in-memory, lightweight representation of the DOM
VDOM facts
render return virtual dom…
…an in-memory, lightweight representation of the DOM
react is write-only to the DOM
VDOM facts
render()
render()return a description of the UI
state describe
introduction to reactjs
for every change of
state describe
introduction to reactjs
for every change of
state describethe whole user interface
introduction to reactjs
data
render(data)
render(data uispecification
)
declarative, stateless approachover
imperative, stateful api
1. everything is a component
Recap
3. think in state, DOM will follow
4. virtual dom is awesome
2. how data flows
flux
Wait there’s moreisomorphic app
immutable-js
relay-graphql
css in jsbaobab
react-native
timecoding
react playgrounddiscover react @apericoder
clone and play!
discover react @Bologna JS
thanks!That’s all
