Introduction to React.js

The slides for my introduction to React.js talk!

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