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. 1.

    Getting started with React 16 Arun Michael Dsouza Software Engineer,

    AdPushup Inc. github.com/ArunMichaelDsouza twitter.com/amdsouza92
  2. 4.

    Fragments and Strings • Return elements in an array from

    the render method • Return strings from the render method
  3. 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> ]; }
  4. 7.
  5. 10.

    The render( ) method can return - • React elements

    • Strings and numbers • Portals • null • Booleans
  6. 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
  7. 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
  8. 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 />; } }
  9. 17.
  10. 24.

    <Text> Portals - DOM node - React component app <Form>

    <Input> <Button> <Text> <Info> <Text> body modal <Modal>
  11. 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); } }
  12. 28.
  13. 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); } }
  14. 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> ); } }
  15. 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>
  16. 35.

    Data in custom attributes ? Well, not really. Still lets

    you pass data- and aria- attributes Yay!
  17. 39.

    Async rendering • High priority updates Eg - Typing •

    Low priority updates Eg - Fetching data from server
  18. 42.

    Improved SSR • Gets rid of process.env checks (which are

    really slow) • Supports streaming of components via renderToNodeStream
  19. 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