Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React.js

48619fc17b3ab68472aebd56c0106278?s=47 Max Stoiber
December 06, 2016

Introduction to React.js

The slides for my introduction to React.js talk!

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

December 06, 2016
Tweet

Transcript

  1. Introduction to React.js Max Stoiber @mxstbr Open Source Developer, Thinkmill

  2. None
  3. None
  4. React

  5. The V in MVC

  6. None
  7. The V in MVC

  8. The Vanilla in MVC

  9. Why does React exist?

  10. Instagram

  11. Rendering on the server?

  12. Rendering on the client!

  13. Dynamic Interfaces

  14. Dynamic Interfaces ≈ Better UX

  15. Dynamic Interfaces are hard

  16. React makes Dynamic Interfaces easy

  17. How does React work?

  18. React creates components

  19. Render those components on the web, on native, in VR,…

  20. Write once, run anywhere?

  21. ⚠ Write once, run anywhere? ⚠

  22. Learn once, write anywhere!

  23. Let’s talk about components

  24. Header SearchResults

  25. SearchResults Logo SearchBar TabNav AppsToggle Btn

  26. SearchResults Input SearchIcon Tab Tab Tab Tab Tab Toggle Tgl

    Tgl
  27. Components in React

  28. React.createElement()

  29. React.createElement('div') // will render this w/ ReactDOM <div></div>

  30. React.createElement('h1') // will render this w/ ReactDOM <h1></h1>

  31. React.createElement('input') // will render this w/ ReactDOM <input></input>

  32. React.createElement('input', { type: 'radio' }) // will render this w/

    ReactDOM <input type="radio"></input>
  33. React.createElement('h1') // will render this w/ ReactDOM <h1></h1>

  34. React.createElement('h1', { className: 'heading' }) // will render this w/

    ReactDOM <h1 class="heading"></h1>
  35. React.createElement('h1', { className: 'heading' }, 'Hello World') // will render

    this w/ ReactDOM <h1 class="heading">Hello World</h1>
  36. React.createElement('div', null, React.createElement('h1', { className: 'heading' }, 'Hello World') )

    // will render this w/ ReactDOM <div> <h1 class="heading">Hello World</h1> </div>
  37. React.createElement('div', { className: 'wrapper' }, React.createElement('h1', { className: 'heading' },

    'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  38. const Wrapper = function (props) { return React.createElement('div', { className:

    'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> </div>
  39. const Wrapper = function (props) { return React.createElement('div', { className:

    'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div> Component!
  40. Rendering the whole DOM is slow

  41. React Elements are representation of the DOM

  42. React.createElement('h1', { className: 'heading' }, 'Hello World') // will return

    something like { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
  43. React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') )

    // will return something like { type: Wrapper, props: null, children: [{ type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }] }
  44. Every tick calculate the changes

  45. Every tick calculate the changes (that's quick, because objects)

  46. // Before { type: 'h1', props: { className: 'heading' },

    children: ['Hello World'] }
  47. // After { type: 'h1', props: { className: 'heading' },

    children: ['This is new'] }
  48. // After { type: 'h1', props: { className: 'heading' },

    children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
  49. // After { type: 'h1', props: { className: 'heading' },

    children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
  50. // After { type: 'h1', props: { className: 'heading' },

    children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
  51. Only render changes to the DOM!

  52. JSX

  53. const Wrapper = function (props) { return React.createElement('div', { className:

    'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  54. const Wrapper = function (props) { return React.createElement('div', { className:

    'wrapper' }, props.children) } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  55. const Wrapper = function (props) { return <div className="wrapper">{ props.children

    }</div> } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  56. const Wrapper = function (props) { return <div className="wrapper">{ props.children

    }</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  57. const Wrapper = function (props) { return React.createElement('div', { className:

    'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  58. const Wrapper = function (props) { return <div className="wrapper">{ props.children

    }</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
  59. None
  60. mxs.is/mstsreact

  61. Thank you! Max Stoiber @mxstbr Come talk to me!