Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. // 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