KEMBAR78
Introduction to React | PPTX
Introduction to
React
Rob Quick
Brief History of React
2011: Created internally at FB.
2012: Instagram acquired by FB.
Begins re-write of their front-end.
2013: Open sourced at JSConf.
Guiding Principles
Declarative/
Composable
Everything is a
‘component’
Data flows in one
direction.
How everyone else does it…
• Model View Controller (MVC)
• Model View ViewModel (MVVM)
• Model View *Something*
Re-render everything
anytime anything
changes.
Virtual DOM
How React Does It
1. On every update, React builds a
new Virtual DOM representation of
your application.
How React Does It
2. It then compares the new
representation against the previous
one, and determines what has
changed.
How React Does It
3. It decides what individual change
to the DOM are required to reflect
this new state. Each change is
placed in a queue.
How React Does It
4. Finally, it batch updates the DOM
based on the changes in the
queue.
<Code />
Source: https://facebook.github.io/react/docs/tutorial.html
Source: https://facebook.github.io/react/docs/tutorial.html
Source: https://facebook.github.io/react/docs/tutorial.html
Demo
Code: https://github.com/robquick/chat-demo-react
Demo
https://brownbag-hsg.firebaseapp.com/
What else do we get by
being decoupled from the
DOM?
Server-Side Rendering
Isomorphic JavaScript
Could we target something
besides the DOM?
React Native
Source: https://facebook.github.io/react-native/
Source: https://facebook.github.io/react-native/
What React Isn’t
• Library, not a framework
• Doesn’t tell you how to fetch data.
• Doesn’t tell you how to push state changes
back to the server.
• Doesn’t help you route from a url to a specific
component
• Doesn’t provide you tooling for packaging or
deploying your application.
Questions?

Introduction to React