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
   

   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