Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Completely backwards compatible with React 15!

Slide 3

Slide 3 text

Ships with the new MIT license

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Fragments and Strings render() { return [

This is h1

This is h2

This is h3

]; }

Slide 6

Slide 6 text

Fragments and Strings

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Strings cannot be returned from the render method in React 15

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Why not try/catch ?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

: ; } }

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Error Boundaries

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Portals app - DOM node - React component

Slide 24

Slide 24 text

Portals - DOM node - React component app body modal

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Why not ReactDOM.render() ?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Portals

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Modal click

); } }

Slide 31

Slide 31 text

Custom DOM attributes Pass custom attributes to your React components

Slide 32

Slide 32 text

Custom DOM attributes render() { return

App

}

Slide 33

Slide 33 text

DOM attributes whitelist

Slide 34

Slide 34 text

DOM attributes whitelist render() { return

App

} React 15

App

React 16

App

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Custom DOM attributes • No more attribute matching with the whitelist • Reduced ﬁle sizes

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Async rendering requestIdleCallback() bit.ly/ﬁber-talk

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

bit.ly/react-16-ssr

Slide 44

Slide 44 text

Reduced ﬁle size 32% size decrease compared to the previous version

Slide 45

Slide 45 text

> 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

Slide 46

Slide 46 text

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