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 full-size slide

  2. The V in MVC

    View full-size slide

  3. The V in MVC

    View full-size slide

  4. The Vanilla in MVC

    View full-size slide

  5. Why does React exist?

    View full-size slide

  6. Rendering on the server?

    View full-size slide

  7. Rendering on the client!

    View full-size slide

  8. Dynamic Interfaces

    View full-size slide

  9. Dynamic Interfaces ≈ Better UX

    View full-size slide

  10. Dynamic Interfaces are hard

    View full-size slide

  11. React makes
    Dynamic Interfaces easy

    View full-size slide

  12. How does React work?

    View full-size slide

  13. React creates components

    View full-size slide

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

    View full-size slide

  15. Write once, run anywhere?

    View full-size slide

  16. ⚠ Write once, run anywhere? ⚠

    View full-size slide

  17. Learn once, write anywhere!

    View full-size slide

  18. Let’s talk about components

    View full-size slide

  19. Header
    SearchResults

    View full-size slide

  20. SearchResults
    Logo SearchBar
    TabNav
    AppsToggle Btn

    View full-size slide

  21. SearchResults
    Input SearchIcon
    Tab Tab Tab Tab Tab Toggle Tgl Tgl

    View full-size slide

  22. Components in React

    View full-size slide

  23. React.createElement()

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Hello World

    View full-size slide

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

    Hello World

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. Rendering the whole DOM is slow

    View full-size slide

  36. React Elements are representation
    of the DOM

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. Every tick calculate the changes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Only render changes to the DOM!

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

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

    Hello World

    View full-size slide

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

    Hello World

    // will render this w/ ReactDOM

    Hello World

    View full-size slide

  51. 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 full-size slide

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

    Hello World

    // will render this w/ ReactDOM

    Hello World

    View full-size slide

  53. mxs.is/mstsreact

    View full-size slide

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

    View full-size slide