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.

  2. • What is React? • React Components • Stateless UI

    • Virtual DOM Agenda
  3. What is React?

  4. None
  5. None
  6. None
  7. • What is React? • React Components • Stateless UI

    • Virtual DOM Agenda
  8. // commentBox.js.jsx var CommentBox = React.createClass({displayName: 'CommentBox', render: function() {

    return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } });
  9. React Component

  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
  11. None
  12. None
  13. Composable, Reusable Components

  14. • What is React? • React Components • Stateless UI

    • Virtual DOM Agenda
  15. Stateless UI

  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
  17. None
  18. None
  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
  20. • What React is • Components, not templates • Re-render,

    not mutate • Virtual DOM Summary
  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
  22. Thanks!

  23. Q&A