Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React

Yos Riady
October 21, 2015

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.

Yos Riady

October 21, 2015
Tweet

More Decks by Yos Riady

Other Decks in Programming

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