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?