Introduction to React

1b0ab2500efc1b91424fb49045312929?s=47 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.

1b0ab2500efc1b91424fb49045312929?s=128

Yos Riady

October 21, 2015
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 8.

    // commentBox.js.jsx var CommentBox = React.createClass({displayName: 'CommentBox', render: function() {

    return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } });
  5. 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
  6. 11.
  7. 12.
  8. 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
  9. 17.
  10. 18.
  11. 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
  12. 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
  13. 22.
  14. 23.

    Q&A