Pro Yearly is on sale from $80 to $50! »

Tech Nottingham: Introduction to React

Tech Nottingham: Introduction to React

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

April 04, 2016
Tweet

Transcript

  1. None
  2. @Jack_Franklin

  3. None
  4. None
  5. None
  6. None
  7. None
  8. The ideas in React are more important than React itself

  9. Components

  10. Header News Feed Nav Chat with Alice

  11. React Components

  12. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

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

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

    } })
  15. return <h1>Hello World!</h1>;

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

  17. This is a good thing, trust me…

  18. It’s not HTML in your JavaScript

  19. It’s JavaScript in your JavaScript

  20. // Input (JSX): var app = <Nav color="blue" />; //

    Output (JS): var app = React.createElement( Nav, { color: "blue" } );
  21. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

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

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

    } }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
  24. https://jsbin.com/fujaru/edit?html,js,output

  25. props

  26. var Person = React.createClass({ render: function() { return ( <div>

    <h2>Name: { this.props.name }</ h2> <p>Favourite colour: { this.props.colour }</p> </div> ); } });
  27. ReactDOM.render( <Person name="Jack" colour="Blue" />, document.body )

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

  29. props: data the component doesn’t change

  30. state

  31. var OnOff = React.createClass({ getInitialState: function() { return { on:

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

    false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
  33. var OnOff = React.createClass({ ... render: function() { return (

    <div> <button onClick={this.toggle}> Toggle </button> </div> ) } })
  34. var OnOff = React.createClass({ ... toggle: function() { this.setState({ on:

    !this.state.on }) }, … })
  35. http://jsbin.com/senedajafa/edit?js,output

  36. state: data the component owns and will change

  37. use props by default

  38. None
  39. None
  40. None
  41. None
  42. None
  43. virtual dom https://facebook.github.io/react/docs/reconciliation.html

  44. components in components

  45. var Mailbox = React.createClass({ getInitialState: function() { return { messages:

    [{ id: 1, title: 'Hello', content: 'How is it going?', sender: 'Alice' }, {…}] } },
  46. render: function() { }

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

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  48. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  49. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  50. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  51. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  52. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  53. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  54. var Message = React.createClass({ render() { return ( <h4> {

    this.props.message.title } </h4> ); } });
  55. http://jsbin.com/jagizaheqo/edit?js,output

  56. reusable components

  57. var Person = React.createClass({ render() { return <p>{this.props.name} has a

    favourite colour of {this.props.colour} </p> } }) ReactDOM.render( <Person name="jack" colour="blue" />, document.body )
  58. ReactDOM.render( <Person colour="blue" />, document.body )

  59. ReactDOM.render( <Person />, document.body )

  60. propTypes

  61. var types = React.PropTypes; var Person = React.createClass({ propTypes: {

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

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

    name: types.string.isRequired, colour: types.string.isRequired },
  64. http://jsbin.com/wawevinesi/edit?js,output

  65. encourage reuse use propTypes

  66. lifecycle

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

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

  70. componentWillMount

  71. var GitHubPerson = React.createClass({ getInitialState: function() { return { data:

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

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

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

    {} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
  75. render: function() { return ( <p>{this.state.data.name} from { this.state.data.company }</p>

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

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

  78. Large applications

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

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

  81. As the requirements for JavaScript single-page applications have become increasingly

    complicated, our code must manage more state than ever before
  82. STATE

  83. STATE STORE

  84. STATE STORE Uni-directional data flow

  85. URLs

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

  87. One of the best (and overlooked) things about React is

    how much code you write that's just plain old JavaScript.
  88. https:// facebook.github.io/react/

  89. Questions?

  90. jackfranklin/react-introduction- exercises

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

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