Tech Nottingham: Introduction to React

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