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

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?”
11. React 16
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
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?