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.
   

   View Slide

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

   View Slide

3. What is React?
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

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

   View Slide

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

   View Slide

9. React Component
   

   View Slide

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
    

    View Slide

11. View Slide

12. View Slide

13. Composable, Reusable Components
    

    View Slide

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

    View Slide

15. Stateless UI
    

    View Slide

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
    

    View Slide

17. View Slide

18. View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

22. Thanks!
    

    View Slide

23. Q&A
    

    View Slide