BristolJS: An Introduction to React

Transcript

1. View Slide

2. @Jack_Franklin
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. The ideas in React are
   more important than React
   itself
   

   View Slide

7. Component Architecture
   

   View Slide

8. Header
   News Feed
   Nav
   Chat
   with
   Alice
   

   View Slide

9. View Slide

10. View Slide

11. React Components
    

    View Slide

12. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    

    View Slide

13. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    

    View Slide

14. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    

    View Slide

15. return Hello World!;
    

    View Slide

16. JSX
    https://facebook.github.io/react/docs/jsx-in-depth.html
    

    View Slide

17. This is a good thing,
    trust me…
    

    View Slide

18. It’s not HTML in your
    JavaScript
    

    View Slide

19. It’s JavaScript in your
    JavaScript
    

    View Slide

20. // Input (JSX):
    var app = ;
    // Output (JS):
    var app = React.createElement(
    Nav,
    { color: "blue" }
    );
    

    View Slide

21. You could write this
    without JSX
    

    View Slide

22. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    ReactDOM.render(
    ,
    document.getElementById('app')
    )
    

    View Slide

23. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    ReactDOM.render(
    ,
    document.getElementById('app')
    )
    

    View Slide

24. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    ReactDOM.render(
    ,
    document.getElementById('app')
    )
    

    View Slide

25. https://jsbin.com/fujaru/edit?html,js,output
    

    View Slide

26. configuring
    components
    

    View Slide

27. props
    

    View Slide

28. var Person = React.createClass({
    render: function() {
    return (
    
    Name: { this.props.name }
    Fav colour: { this.props.colour }
    
    );
    }
    });
    

    View Slide

29. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

30. https://jsbin.com/wulolu/edit?js,output
    

    View Slide

31. props aren’t just for
    christmas!
    

    View Slide

32. props: data the
    component doesn’t
    change
    

    View Slide

33. components with just
    props are the best kind
    

    View Slide

34. state
    

    View Slide

35. var OnOff = React.createClass({
    getInitialState: function() {
    return { on: false }
    },
    render: function() {
    return (
    
    Toggle
    { this.state.on ? 'ON' :
    'OFF'}
    
    )
    }
    })
    

    View Slide

36. var OnOff = React.createClass({
    getInitialState: function() {
    return { on: false }
    },
    render: function() {
    return (
    
    Toggle
    { this.state.on ? 'ON' : 'OFF'}
    
    )
    }
    })
    

    View Slide

37. events
    

    View Slide

38. var OnOff = React.createClass({
    ...
    render: function() {
    return (
    
    
    Toggle
    
    
    )
    }
    })
    

    View Slide

39. var OnOff = React.createClass({
    ...
    toggle: function() {
    this.setState({
    on: !this.state.on
    })
    },
    …
    })
    

    View Slide

40. http://jsbin.com/senedajafa/edit?js,output
    

    View Slide

41. pure functions
    

    View Slide

42. render: State -> VDOM
    render(x) => VDOM-X
    render(x) => VDOM-X
    render(y) => VDOM-Y
    

    View Slide

43. state: data the component
    owns and will change
    

    View Slide

44. use props by default
    

    View Slide

45. Bonus: pure functional
    components
    

    View Slide

46. Or: dumb components
    

    View Slide

47. var ShowName = function(props) {
    return Your name is { props.name }
    ;
    }
    ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

48. var ShowName = function(props) {
    return Your name is { props.name }
    ;
    }
    ReactDOM.render(
    ,
    document.body
    )
    http://jsbin.com/fawafahaqo/1/edit?js,output
    

    View Slide

49. “This pattern is designed to
    encourage the creation of these
    simple components that should
    comprise large portions of your
    apps.”
    

    View Slide

50. “In the future, we’ll also be able to
    make performance optimizations
    … by avoiding unnecessary
    checks and memory allocations”
    https://facebook.github.io/react/blog/2015/09/10/react-v0.14-
    rc1.html
    

    View Slide

51. efficient rendering
    for free
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. components in components
    in components in
    components
    

    View Slide

57. omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    omponents in components in components in components in co
    components in components in components in components in c
    

    View Slide

58. var Mailbox = React.createClass({
    getInitialState: function() {
    return {
    messages: [{
    id: 1,
    title: 'Hello',
    content: 'How is it going?',
    sender: 'Alice'
    }, {…}]
    }
    },
    

    View Slide

59. render: function() {
    }
    

    View Slide

60. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

61. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

62. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

63. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

64. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

65. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

66. var messages = this.state.messages;
    var mails =
    messages.map(function(message) {
    return (
    
    
    
    );
    })
    return {mails};
    

    View Slide

67. var Message = React.createClass({
    render() {
    return (
    
    { this.props.message.title }
    
    );
    }
    });
    

    View Slide

68. http://jsbin.com/jagizaheqo/edit?js,output
    

    View Slide

69. reusable components
    

    View Slide

70. or: not hating yourself
    in 6 months time
    

    View Slide

71. var Person = React.createClass({
    render() {
    return {this.props.name} has a
    favourite colour of {this.props.colour}
    
    }
    })
    ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

72. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

73. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

74. propTypes
    

    View Slide

75. var types = React.PropTypes;
    var Person = React.createClass({
    propTypes: {
    name: types.string.isRequired,
    colour: types.string.isRequired
    },
    

    View Slide

76. var types = React.PropTypes;
    var Person = React.createClass({
    propTypes: {
    name: types.string.isRequired,
    colour: types.string.isRequired
    },
    

    View Slide

77. var types = React.PropTypes;
    var Person = React.createClass({
    propTypes: {
    name: types.string.isRequired,
    colour: types.string.isRequired
    },
    

    View Slide

78. http://jsbin.com/wawevinesi/edit?js,output
    

    View Slide

79. encourage reuse
    use propTypes
    

    View Slide

80. propTypes aren’t
    checked in production
    

    View Slide

81. lifecycle
    

    View Slide

82. View Slide

83. https://docs.google.com/drawings/
    d/
    15yjhlRlNs2k8rDw1g_F9_nYWUL0
    FsUDCFzAxMOGv5nI/edit
    

    View Slide

84. https://facebook.github.io/
    react/docs/component-
    specs.html
    

    View Slide

85. componentWillMount
    

    View Slide

86. Talking to APIs
    

    View Slide

87. var GitHubPerson = React.createClass({
    getInitialState: function() {
    return { data: {} };
    },
    componentWillMount: function() {
    getData().then(function(data) {
    this.setState({ data: data })
    }.bind(this));
    },
    

    View Slide

88. var GitHubPerson = React.createClass({
    getInitialState: function() {
    return { data: {} };
    },
    componentWillMount: function() {
    getData().then(function(data) {
    this.setState({ data: data })
    }.bind(this));
    },
    

    View Slide

89. var GitHubPerson = React.createClass({
    getInitialState: function() {
    return { data: {} };
    },
    componentWillMount: function() {
    getData().then(function(data) {
    this.setState({ data: data })
    }.bind(this));
    },
    

    View Slide

90. var GitHubPerson = React.createClass({
    getInitialState: function() {
    return { data: {} };
    },
    componentWillMount: function() {
    getData().then(function(data) {
    this.setState({ data: data })
    }.bind(this));
    },
    

    View Slide

91. render: function() {
    return (
    { this.state.data.name } from {
    this.state.data.company }
    );
    }
    

    View Slide

92. http://jsbin.com/nalozobapa/edit?js,output
    

    View Slide

93. https://facebook.github.io/
    react/docs/thinking-in-
    react.html
    

    View Slide

94. There’s so much more!
    

    View Slide

95. URLs
    

    View Slide

96. https://github.com/
    rackt/react-router
    

    View Slide

97. Data Management
    

    View Slide

98. http://redux.js.org/
    

    View Slide

99. As the requirements for JavaScript
    single-page applications have become
    increasingly complicated, our code must
    manage more state than ever before
    

    View Slide

100. STATE
     STORE
     

     View Slide

101. STATE
     STORE
     Uni-directional data flow
     

     View Slide

102. Universal React
     Testing React
     React Native
     React + CSS Modules
     

     View Slide

103. https://24ways.org/2015/
     universal-react/
     http://12devsofxmas.co.uk/
     2015/12/day-2-testing-
     react-applications/
     

     View Slide

104. One of the best (and overlooked)
     things about React is how much
     code you write that's just plain old
     JavaScript.
     

     View Slide

105. https://
     facebook.github.io/react/
     

     View Slide

106. 10th of June, London
     React Workshop
     http://www.whiteoctoberevents.co.uk/
     event/reactjs-workshop-june-16/
     

     View Slide

107. @Jack_Franklin
     jack@pusher.com
     javascriptplayground.com
     

     View Slide

108. Questions?
     

     View Slide