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

Introduction to React.js

Max Stoiber
December 06, 2016

Introduction to React.js

The slides for my introduction to React.js talk!

Max Stoiber

December 06, 2016
Tweet

More Decks by Max Stoiber

Other Decks in Technology

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. React

    View Slide

  5. The V in MVC

    View Slide

  6. View Slide

  7. The V in MVC

    View Slide

  8. The Vanilla in MVC

    View Slide

  9. Why does React exist?

    View Slide

  10. Instagram

    View Slide

  11. Rendering on the server?

    View Slide

  12. Rendering on the client!

    View Slide

  13. Dynamic Interfaces

    View Slide

  14. Dynamic Interfaces ≈ Better UX

    View Slide

  15. Dynamic Interfaces are hard

    View Slide

  16. React makes
    Dynamic Interfaces easy

    View Slide

  17. How does React work?

    View Slide

  18. React creates components

    View Slide

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

    View Slide

  20. Write once, run anywhere?

    View Slide

  21. ⚠ Write once, run anywhere? ⚠

    View Slide

  22. Learn once, write anywhere!

    View Slide

  23. Let’s talk about components

    View Slide

  24. Header
    SearchResults

    View Slide

  25. SearchResults
    Logo SearchBar
    TabNav
    AppsToggle Btn

    View Slide

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

    View Slide

  27. Components in React

    View Slide

  28. React.createElement()

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. React.createElement('h1')
    // will render this w/ ReactDOM

    View Slide

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

    View Slide

  35. React.createElement('h1', { className: 'heading' }, 'Hello World')
    // will render this w/ ReactDOM
    Hello World

    View Slide

  36. React.createElement('div', null,
    React.createElement('h1', { className: 'heading' }, 'Hello World')
    )
    // will render this w/ ReactDOM

    Hello World

    View Slide

  37. React.createElement('div', { className: 'wrapper' },
    React.createElement('h1', { className: 'heading' }, 'Hello World')
    )
    // will render this w/ ReactDOM

    Hello World

    View Slide

  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


    View Slide

  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

    Hello World

    Component!

    View Slide

  40. Rendering the whole DOM is slow

    View Slide

  41. React Elements are representation
    of the DOM

    View Slide

  42. React.createElement('h1', { className: 'heading' }, 'Hello World')
    // will return something like
    {
    type: 'h1',
    props: {
    className: 'heading'
    },
    children: ['Hello World']
    }

    View Slide

  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']
    }]
    }

    View Slide

  44. Every tick calculate the changes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. Only render changes to the DOM!

    View Slide

  52. JSX

    View Slide

  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

    Hello World

    View Slide

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

    Hello World

    View Slide

  55. const Wrapper = function (props) {
    return { props.children }
    }
    React.createElement(Wrapper, null,
    Hello World
    )
    // will render this w/ ReactDOM

    Hello World

    View Slide

  56. const Wrapper = function (props) {
    return { props.children }
    }

    Hello World

    // will render this w/ ReactDOM

    Hello World

    View Slide

  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

    Hello World

    View Slide

  58. const Wrapper = function (props) {
    return { props.children }
    }

    Hello World

    // will render this w/ ReactDOM

    Hello World

    View Slide

  59. View Slide

  60. mxs.is/mstsreact

    View Slide

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

    View Slide