BristolJS: An Introduction to React

Transcript

2. @Jack_Franklin
6. The ideas in React are more important than React itself
7. Component Architecture
8. 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. 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
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
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?