Getting started with React 16

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.

C00289a7b57c00bb0ab55d5e04cc3345?s=128

Arun Michael Dsouza

October 16, 2017
Tweet

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

  7. None
  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 />; } }
  17. None
  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