A talk on the React.js library, covering the two key principles of react: reusable components and statelessness in your UI. Also covers some internals of the virtual DOM.

1. Introduction to React
A library for creating user interfaces.

2. ● What is React?
● React Components
● Stateless UI
● Virtual DOM
Agenda

3. What is React?

7. ● What is React?
● React Components
● Stateless UI
● Virtual DOM
Agenda

8. // commentBox.js.jsx
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});

9. React Component

10. Composable, Reusable Components
● Rethinking the way we build UIs on the web
● Build components, not templates
● Use React components to create cohesive building blocks and separate your
concerns
● Reduce coupling and increase cohesion

13. Composable, Reusable Components

14. ● What is React?
● React Components
● Stateless UI
● Virtual DOM
Agenda

15. Stateless UI

16. Building UIs is hard because there is so much state.
Re-render, don’t mutate.
● Data displayed is guaranteed to be up-to-date
● No two-way data-binding complexity
● No explicit DOM manipulations (components are declarative.)
Stateless UI

19. Virtual DOM
Re-render? But isn’t DOM manipulation slow?
React knows to only update the changed parts.
Virtual DOM: A lightweight implementation of the DOM

20. ● What React is
● Components, not templates
● Re-render, not mutate
● Virtual DOM
Summary

21. References / Additional Topics
React Tutorial (https://facebook.github.io/react/docs/tutorial.html)
Thinking in React (https://facebook.github.io/react/docs/thinking-in-react.html)
Reactive Programming
React Native
Flux
Reflux

22. Thanks!

23. Q&A