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

Tech Nottingham: Introduction to React

Tech Nottingham: Introduction to React

Jack Franklin

April 04, 2016
Tweet

More Decks by Jack Franklin

Other Decks in Technology

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
    [email protected]
    javascriptplayground.com

    View Slide