Slide deck from my "Intro to React" brownbag. Presented to my HSG/ECM co-workers on April 22nd, 2016.

1. Introduction to
React
Rob Quick

2. 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.

3. Guiding Principles

4. Declarative/
Composable

6. Everything is a
‘component’

7. Data flows in one
direction.

8. How everyone else does it…
• Model View Controller (MVC)
• Model View ViewModel (MVVM)
• Model View *Something*

9. Re-render everything
anytime anything
changes.

10. Virtual DOM

11. How React Does It
1. On every update, React builds a
new Virtual DOM representation of
your application.

12. How React Does It
2. It then compares the new
representation against the previous
one, and determines what has
changed.

13. 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.

14. How React Does It
4. Finally, it batch updates the DOM
based on the changes in the
queue.

15. <Code />

16. Source: https://facebook.github.io/react/docs/tutorial.html

17. Source: https://facebook.github.io/react/docs/tutorial.html

18. Source: https://facebook.github.io/react/docs/tutorial.html

19. Demo
Code: https://github.com/robquick/chat-demo-react

20. Demo
https://brownbag-hsg.firebaseapp.com/

21. What else do we get by
being decoupled from the
DOM?

22. Server-Side Rendering

23. Isomorphic JavaScript

24. Could we target something
besides the DOM?

25. React Native

26. Source: https://facebook.github.io/react-native/

27. Source: https://facebook.github.io/react-native/

28. 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.

29. Questions?