Tech Nottingham: Introduction to React

Transcript

1. View Slide

2. @Jack_Franklin
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

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

   View Slide

9. Components
   

   View Slide

10. Header
    News Feed
    Nav
    Chat
    with
    Alice
    

    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. var HelloWorld = React.createClass({
    render: function() {
    return Hello World!;
    }
    })
    ReactDOM.render(
    ,
    document.getElementById('app')
    )
    

    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. https://jsbin.com/fujaru/edit?html,js,output
    

    View Slide

25. props
    

    View Slide

26. var Person = React.createClass({
    render: function() {
    return (
    
    Name: { this.props.name }
    h2>
    Favourite colour:
    { this.props.colour }
    
    );
    }
    });
    

    View Slide

27. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

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

    View Slide

29. props: data the
    component doesn’t
    change
    

    View Slide

30. state
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. state: data the component
    owns and will change
    

    View Slide

37. use props by default
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. virtual dom
    https://facebook.github.io/react/docs/reconciliation.html
    

    View Slide

44. components in
    components
    

    View Slide

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

    View Slide

46. render: function() {
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. reusable components
    

    View Slide

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

    View Slide

58. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

59. ReactDOM.render(
    ,
    document.body
    )
    

    View Slide

60. propTypes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

65. encourage reuse
    use propTypes
    

    View Slide

66. lifecycle
    

    View Slide

67. View Slide

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

    View Slide

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

    View Slide

70. componentWillMount
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. Large applications
    

    View Slide

79. http://redux.js.org/
    

    View Slide

80. http://redux.js.org/docs/
    introduction/
    Motivation.html
    

    View Slide

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

    View Slide

82. STATE
    

    View Slide

83. STATE
    STORE
    

    View Slide

84. STATE
    STORE
    Uni-directional data flow
    

    View Slide

85. URLs
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. Questions?
    

    View Slide

90. jackfranklin/react-introduction-
    exercises
    

    View Slide

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

    View Slide

92. @Jack_Franklin
    jack@pusher.com
    javascriptplayground.com
    

    View Slide