$30 off During Our Annual Pro Sale. View Details »

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.

Arun Michael Dsouza

October 16, 2017
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

  1. Getting started with React 16
    Arun Michael Dsouza
    Software Engineer, AdPushup Inc.
    github.com/ArunMichaelDsouza
    twitter.com/amdsouza92

    View Slide

  2. Completely backwards compatible with React 15!

    View Slide

  3. Ships with the new MIT license

    View Slide

  4. Fragments and Strings
    • Return elements in an array from the render method
    • Return strings from the render method

    View Slide

  5. Fragments and Strings
    render() {
    return [
    This is h1,
    This is h2,
    This is h3
    ];
    }

    View Slide

  6. Fragments and Strings

    View Slide

  7. View Slide

  8. Fragments and Strings
    render() {
    return “Just a string”;
    }

    View Slide

  9. Strings cannot be returned from the render method in React 15

    View Slide

  10. The render( ) method can return -
    • React elements
    • Strings and numbers
    • Portals
    • null
    • Booleans

    View Slide

  11. Error Boundaries
    • Catch run time errors
    • Display a fallback UI

    View Slide

  12. Why not try/catch ?

    View Slide

  13. Error Boundaries
    componentDidCatch(error, info) {
    // Render fallback UI
    // Log error
    }

    View Slide

  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

    View Slide

  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 Error;
    }
    }
    Child.jsx

    View Slide

  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 ?
    Error : ;
    }
    }

    View Slide

  17. View Slide

  18. Error Boundaries

    View Slide

  19. Why unmount whole react
    component tree ?
    bit.ly/react-uncaught-error-behaviour

    View Slide

  20. Component Stack Traces
    create-react-app
    babel-plugin-transform-react-jsx-source
    bit.ly/react-stack-trace-lines

    View Slide

  21. Portals
    Render children into a DOM node that exists in
    some other DOM hierarchy

    View Slide

  22. Portals
    render() {
    return ReactDom.createPortal(child, node);
    }

    View Slide

  23. Portals
    app





    - DOM node
    - React component

    View Slide


  24. Portals
    - DOM node
    - React component
    app





    body
    modal

    View Slide

  25. Portals
    class Info extends Component {
    constructor(props) {
    super(props);
    }
    render() {
    return ;
    }
    }
    class Modal extends Component {
    constructor(props) {
    super(props);
    }
    render() {
    const node = document.getElementById(‘modal’);
    return ReactDOM.createPortal(this.props.children, node);
    }
    }

    View Slide

  26. Why not ReactDOM.render() ?

    View Slide

  27. Portals
    render() {
    return ReactDom.render(child, node);
    }

    View Slide

  28. Portals

    View Slide

  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);
    }
    }

    View Slide

  30. Event Bubbling in Portals
    class Info extends Component {
    constructor(props) {
    super(props);
    }
    render() {
    return (



    Modal
    click



    );
    }
    }

    View Slide

  31. Custom DOM attributes
    Pass custom attributes to your React components

    View Slide

  32. Custom DOM attributes
    render() {
    return App
    }

    View Slide

  33. DOM attributes whitelist

    View Slide

  34. DOM attributes whitelist
    render() {
    return App
    }
    React 15
    App
    React 16
    App

    View Slide

  35. Data in custom attributes ?
    Well, not really.
    Still lets you pass data- and
    aria- attributes
    Yay!

    View Slide

  36. Custom DOM attributes
    • No more attribute matching with the whitelist
    • Reduced file sizes

    View Slide

  37. New core architecture
    Completely re-written architecture codenamed “Fiber”

    View Slide

  38. Async rendering
    • Priority based scheduling of events
    • Fully backwards compatible

    View Slide

  39. Async rendering
    • High priority updates
    Eg - Typing
    • Low priority updates
    Eg - Fetching data from server

    View Slide

  40. Async rendering
    requestIdleCallback()
    bit.ly/fiber-talk

    View Slide

  41. Improved SSR
    Faster streaming of components down the wire,
    to the client

    View Slide

  42. Improved SSR
    • Gets rid of process.env checks (which are really slow)
    • Supports streaming of components via renderToNodeStream

    View Slide

  43. bit.ly/react-16-ssr

    View Slide

  44. Reduced file size
    32% size decrease compared to the previous version

    View Slide

  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

    View Slide

  46. Thank you
    Arun Michael Dsouza
    Software Engineer, AdPushup Inc.
    github.com/ArunMichaelDsouza
    twitter.com/amdsouza92

    View Slide