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

What's New with React, 2018 Edition

What's New with React, 2018 Edition

A little walkthrough of what's happening with React 16.3 (and what's on the horizon), along with why I'm super happy we chose to go with React.

Links: https://gist.github.com/jasonrhodes/6e26fc1d54a2fdc7fec64ab355a77d14

Jason Rhodes

April 04, 2018
Tweet

More Decks by Jason Rhodes

Other Decks in Programming

Transcript

  1. What’s new with React 2018 Edition

  2. What’s new with React Spring 2018 Edition

  3. What’s new with React April 2018 Edition

  4. What’s new with React 4 April 2018 2:51PM Edition

  5. What’s new with React

  6. What’s React?

  7. “Will I still need jQuery?”

  8. None
  9. None
  10. None
  11. React 16

  12. None
  13. Portals

  14. Fragments </>

  15. Error Boundaries

  16. React 16.3

  17. React 16.3 componentWillMount

  18. React 16.3 componentWillUpdate

  19. React 16.3 componentWillReceiveProps

  20. React 16.3 UNSAFE_componentWillMount hello! (etc)

  21. React 16.3 getDerivedStateFromProps hello!

  22. React 16.3 New Context API

  23. <> <Navigation token={token} /> <Panel token={token}> <h1>Dashboard</h1> <Chart token={token} data={

    <button token={token}>Submi </Panel> </>
  24. <> <Legend token={token} /> <ShareButton token={token} /> <LineGraph token={token} data

    </>
  25. <> <Navigation theme={theme} tok <Panel theme={theme} token={t <h1>Dashboard</h1> <Chart theme={theme}

    token= <button theme={theme} token </Panel> </>
  26. <> <Legend theme={theme} token={ <ShareButton theme={theme} to <LineGraph theme={theme} toke

    </>
  27. <> <Navigation store={store} /> <Panel store={store}> <h1>Dashboard</h1> <Chart store={store} data={

    <button store={store}>Submi </Panel> </>
  28. <> <Legend store={store} /> <ShareButton store={store} /> <LineGraph store={store} data

    </>
  29. window.store =

  30. https://codesandbox.io/s/0014vr1xnl https://www.youtube.com/watch?v=XLJN4JfniH4

  31. React 16.??? Async Rendering

  32. React 16.??? Async Rendering A.K.A. the reason Fiber exists

  33. None
  34. React 16 Fiber 1. Reconciliation 2. Commit

  35. React 16 Fiber https://claudiopro.github.io/react-fiber-vs-stack-demo

  36. React 16 Fiber How do you know which updates are

    high priority and which are low priority?
  37. React 16 Fiber T I M E S L I

    C I N G
  38. React 16 Fiber S U S P E N S

    E
  39. React 16 Fiber

  40. React 16.??? Async Rendering T I M E S L

    I C I N G + S U S P E N S E
  41. So what?