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

More Decks by Yos Riady

Other Decks in Programming


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

    return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } });
  2. 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
  3. 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
  4. 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
  5. 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
  6. Q&A