Tech Nottingham: Introduction to React

Transcript

2. @Jack_Franklin
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
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
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