BristolJS: An Introduction to React

BristolJS: An Introduction to React

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

April 27, 2016
Tweet

Transcript

  1. None
  2. @Jack_Franklin

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

  7. Component Architecture

  8. Header News Feed Nav Chat with Alice

  9. None
  10. None
  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. You could write this without JSX

  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. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

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

  26. configuring components

  27. props

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

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

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

  31. props aren’t just for christmas!

  32. props: data the component doesn’t change

  33. components with just props are the best kind

  34. state

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

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

    false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
  37. events

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

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

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

  41. pure functions

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

    render(y) => VDOM-Y
  43. state: data the component owns and will change

  44. use props by default

  45. Bonus: pure functional components

  46. Or: dumb components

  47. var ShowName = function(props) { return <p>Your name is {

    props.name } </p>; } ReactDOM.render( <ShowName name="jack" />, document.body )
  48. var ShowName = function(props) { return <p>Your name is {

    props.name } </p>; } ReactDOM.render( <ShowName name="jack" />, document.body ) http://jsbin.com/fawafahaqo/1/edit?js,output
  49. “This pattern is designed to encourage the creation of these

    simple components that should comprise large portions of your apps.”
  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
  51. efficient rendering for free

  52. None
  53. None
  54. None
  55. None
  56. components in components in components in components

  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
  58. var Mailbox = React.createClass({ getInitialState: function() { return { messages:

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

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

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

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

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

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

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

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

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

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

  69. reusable components

  70. or: not hating yourself in 6 months time

  71. 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 )
  72. ReactDOM.render( <Person colour="blue" />, document.body )

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

  74. propTypes

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

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

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

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

  79. encourage reuse use propTypes

  80. propTypes aren’t checked in production

  81. lifecycle

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

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

  85. componentWillMount

  86. Talking to APIs

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

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

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

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

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

    this.state.data.company }</p> ); }
  92. http://jsbin.com/nalozobapa/edit?js,output

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

  94. There’s so much more!

  95. URLs

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

  97. Data Management

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

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

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

  101. STATE STORE Uni-directional data flow

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

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

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

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

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

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

  108. Questions?