Getting started with React 16

This presentation focuses on some of the more newer and promising features in the React JS library - everything from enhanced server side rendering to building robust components for your applications.

Transcript

1. Getting started with React 16 Arun Michael Dsouza Software Engineer, AdPushup Inc. github.com/ArunMichaelDsouza twitter.com/amdsouza92
2. Completely backwards compatible with React 15!
3. Ships with the new MIT license
4. Fragments and Strings • Return elements in an array from the render method • Return strings from the render method
5. Fragments and Strings render() { return [ <h1 key="1">This is h1</h1>, <h2 key="2">This is h2</h2>, <h3 key="3">This is h3</h3> ]; }
6. Fragments and Strings
8. Fragments and Strings render() { return “Just a string”; }
9. Strings cannot be returned from the render method in React 15
10. The render( ) method can return - • React elements • Strings and numbers • Portals • null • Booleans
11. Error Boundaries • Catch run time errors • Display a fallback UI
12. Why not try/catch ?
13. Error Boundaries componentDidCatch(error, info) { // Render fallback UI // Log error }
14. Error Boundaries Parent Child Error occurs in any lifecycle method of Child and is caught by Parent Error is caught in componentDidCatch() of Parent Fallback UI
15. Error Boundaries class Child extends Component { constructor(props) { super(props); this.state = { error: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ error: true }); } render() { if (this.state.error) { throw new Error('I crashed!'); } return <button onClick = { this.handleClick }>Error</button>; } } Child.jsx
16. Error Boundaries Parent.jsx class Parent extends Component { constructor(props) { super(props); this.state = { errorInChild: false }; } componentDidCatch() { this.setState({ errorInChild: true }); } render() { return this.state.errorInChild ? <div>Error</div> : <Child />; } }
18. Error Boundaries
19. Why unmount whole react component tree ? bit.ly/react-uncaught-error-behaviour
20. Component Stack Traces create-react-app babel-plugin-transform-react-jsx-source bit.ly/react-stack-trace-lines
21. Portals Render children into a DOM node that exists in some other DOM hierarchy
22. Portals render() { return ReactDom.createPortal(child, node); }
23. Portals app <Form> <Input> <Button> <Text> <Modal> <Info> - DOM node - React component <Text>
24. <Text> Portals - DOM node - React component app <Form> <Input> <Button> <Text> <Info> <Text> body modal <Modal>
25. Portals class Info extends Component { constructor(props) { super(props); } render() { return <Modal><Text text=“This is the text” /></Modal>; } } class Modal extends Component { constructor(props) { super(props); } render() { const node = document.getElementById(‘modal’); return ReactDOM.createPortal(this.props.children, node); } }
26. Why not ReactDOM.render() ?
27. Portals render() { return ReactDom.render(child, node); }
28. Portals
29. Event Bubbling in Portals class Modal extends Component { constructor(props) { super(props); } render() { const node = document.getElementById(‘modal’); return ReactDOM.createPortal(this.props.children, node); } }
30. Event Bubbling in Portals class Info extends Component { constructor(props) { super(props); } render() { return ( <div onClick={this.handleClick}> <Modal> <div> Modal <button>click</button> </div> </Modal> </div> ); } }
31. Custom DOM attributes Pass custom attributes to your React components
32. Custom DOM attributes render() { return <div data-attr="10" attr="20">App</div> }
33. DOM attributes whitelist
34. DOM attributes whitelist render() { return <div custom-attr=“20">App</div> } React 15 <div>App</div> React 16 <div custom-attr=“20">App</div>
35. Data in custom attributes ? Well, not really. Still lets you pass data- and aria- attributes Yay!
36. Custom DOM attributes • No more attribute matching with the whitelist • Reduced file sizes
37. New core architecture Completely re-written architecture codenamed “Fiber”
38. Async rendering • Priority based scheduling of events • Fully backwards compatible
39. Async rendering • High priority updates Eg - Typing • Low priority updates Eg - Fetching data from server
40. Async rendering requestIdleCallback() bit.ly/fiber-talk
41. Improved SSR Faster streaming of components down the wire, to the client
42. Improved SSR • Gets rid of process.env checks (which are really slow) • Supports streaming of components via renderToNodeStream
43. bit.ly/react-16-ssr
44. Reduced file size 32% size decrease compared to the previous version
45. > npm i react react-dom —save > npm i react@16 react-dom@16 —save > yarn add react@16 react-dom@16 Installation bit.ly/react-16-deprecations
46. Thank you Arun Michael Dsouza Software Engineer, AdPushup Inc. github.com/ArunMichaelDsouza twitter.com/amdsouza92