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