Introduction to React

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.

Transcript

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