Building modern React applications

With the new additions to React, the way we build frontend applications is evolving, leading to improved performance and maintainability. As of today, the most noticeable React API additions are Context, Hooks and Suspense.
How do we apply new best practices to manage our application state?
What are common techniques for fetching data?
How do we architect modern React applications using a type system and a design system?
In this talk, we'll walk through emerging patterns that helps us write exquisite React applications today.

Transcript

1. Building Modern React Applications @glnnrys
2. Glenn Reyes @glnnrys
3. Why do we love building applications? @glnnrys
4. Why do we love building modern applications? @glnnrys
5. It's exciting
6. ✨ It's new @glnnrys
7. ✨ It's new for a reason @glnnrys
8. Modern apps lets us step out of the comfort zone @glnnrys
9. Modern apps lets us keep moving forward @glnnrys
10. Modern apps lets us be creative @glnnrys
11. Modern apps lets us building great things. @glnnrys
12. Vincent van Gogh “Great things are done by a series of small things brought together.” @glnnrys
13. What is modern?
14. Darrin Alfred In its simplest form, the term modern implies the up-to-date, a current development, or a spirit in step with its own time. @glnnrys
15. Bleeding edge @glnnrys
16. On the web ... @glnnrys
17. On the web there's new libraries every day @glnnrys
18. Anything that came out yesterday is not modern anymore @glnnrys
19. React @glnnrys
21. Google Trends
22. State of JS 2018
23. @glnnrys
24. Don't reinvent the wheel No need to set up and configure from scratch @glnnrys
25. CRA Gatsby @glnnrys
26. Others are fine too! Use what works best for you @glnnrys
27. Why? @glnnrys
28. Community Support ❤ @glnnrys
29. Powerful @glnnrys
30. @glnnrys
31. People love solving problems @glnnrys
32. NO PROBLEMS === NO
33. How are problems solved in React today? @glnnrys
34. State management @glnnrys
35. State management @glnnrys
36. @glnnrys
37. @glnnrys Context
38. Kent C. Dodds React is a state management library. @glnnrys
39. const ThemeContext = React.createContext('light'); const App = () => ( <ThemeContext.Provider value="dark"> <ProfileHeader /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); }
40. const ThemeContext = React.createContext('light'); const App = () => ( <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const ThemeContext = React.createContext('light');
41. const ThemeContext = React.createContext('light'); const App = () => ( <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const App = () => ( <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> );
42. const ThemeContext = React.createContext('light'); const App = () => ( <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); }
43. <App /> <Header /> <Content /> <Footer /> <Articles /> ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider /> @glnnrys
44. <App /> <Header /> <Content /> <Footer /> <Articles /> ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider /> @glnnrys
45. Context state doesn't need to be globally accessible @glnnrys
46. What's happening? Tweet @glnnrys
47. What's happening? Tweet App @glnnrys
48. What's happening? Tweet FeedContext App @glnnrys
49. What's happening? Tweet UserContext App FeedContext @glnnrys
50. What's happening? Tweet UserContext App FeedContext @glnnrys
51. Put Context state as close as needed @glnnrys
52. What's new in React @glnnrys
53. @glnnrys Hooks
54. import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
55. Function components No more stateless components @glnnrys
56. Class components No more stateful components @glnnrys
57. Class components still a thing? @glnnrys
58. Use hooks for new components If the team is fine with it @glnnrys
59. Use hooks for new components If the team is fine with it Keep existing class components Rewrite them into hooks if it makes life easier @glnnrys
60. Experimental Concurrent Mode @glnnrys
61. React Docs Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. @glnnrys
62. @glnnrys Suspense
63. Suspense lets components wait for something before rendering @glnnrys
64. Suspend the render until new data is loaded from external sources @glnnrys
65. const HeavyComponent = React.lazy(() => import('./HeavyComponent')); const App = () => ( <React.Suspense fallback={<Loading />}> <div> <HeavyComponent /> </div> </React.Suspense> );
66. Other new React features Fragments Error Boundaries React.memo() React.createPortal() DevTools Profiler API @glnnrys
67. Patterns @glnnrys
68. const EnhancedComponent = higherOrderComponent(WrappedComponent); Higher Order Component @glnnrys
69. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> Render Props @glnnrys
70. import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } Hooks @glnnrys
71. How do we fetch data in React? @glnnrys
72. Fetch-On-Render @glnnrys
73. // Class component componentDidMount() { fetchData() .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } Fetch-On-Render @glnnrys
74. // Class component componentDidMount() { fetchUser() .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } // Function component useEffect(() => { fetchData() .then(data => setState({ data, loading: false })) .catch(error => setState({ error, loading: false })); }, []); Fetch-On-Render @glnnrys
75. Fetch-On-Render @glnnrys Download Code
76. What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading
77. What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading Fetch Feed Data Render Loading Render User Data
78. What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading Fetch Feed Data Render Loading Render User Data Render Feed Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!
 Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undefined` is encountered!
79. Fetch-Then-Render @glnnrys
80. // Function component useEffect(() => { Promise.all([ fetchUser(), fetchFeed(), ]) .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); }, []); Fetch-Then-Render @glnnrys
81. Fetch-Then-Render @glnnrys Download Code
82. Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data What's happening? Tweet
83. Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data What's happening? Tweet
84. What's happening? Tweet Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Feed Data Render User Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!
 Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undefined` is encountered!
85. Render-As-You-Fetch @glnnrys
86. Render-As-You-Fetch @glnnrys Download Code
87. Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Fetch User Data Render
88. Render-As-You-Fetch Render Render @glnnrys Download Code Fetch Feed Data Fetch User Data What's happening? Tweet Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!
 Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undefined` is encountered! Render Feed Data Render User Data
89. Render-As-You-Fetch @glnnrys Download Code
90. Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Fetch User Data Render
91. Render-As-You-Fetch @glnnrys Download Code Render Render Fetch Feed Data Fetch User Data Render Loading What's happening? Tweet
92. Render-As-You-Fetch @glnnrys Download Code Render Render Fetch Feed Data Fetch User Data Render Loading Render Loading What's happening? Tweet
93. Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Render Render Feed Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!
 Hint: we are using @gatsbyjs Render Loading Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undefined` is encountered! What's happening? Tweet
94. What's happening? Tweet Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Feed Data Render Render Render User Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!
 Hint: we are using @gatsbyjs Render Loading Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undefined` is encountered!
95. Suspense for Data Fetching not available (in a stable release) yet @glnnrys reactjs.org/concurrent
96. Systems
97. Type systems
98. Why would I need a type system? @glnnrys
99. Why would I need a type system? Confidence Auto suggestions No more prop types @glnnrys
100. https://www.carlrippon.com/why-typescript-with-react @glnnrys
101. @glnnrys
102. Design systems
105. Scales & Theming constraints
106. // example theme.js export default { breakpoints: ['40em', '52em', '64em'], fontSizes: [ 12, 14, 16, 20, 24, 32, 48, 64 ], colors: { blue: '#07c', lightgray: '#f6f6ff' }, space: [ 0, 4, 8, 16, 32, 64, 128, 256 ], fonts: { body: 'system-ui, sans-serif', heading: 'inherit', monospace: 'Menlo, monospace', }, fontWeights: { body: 400, heading: 700, }, buttons: { primary: { color: 'white', bg: 'primary', } } } <Button variant="primary" mr={2}>Beep</Button> <Button variant="secondary">Boop</Button>
107. How do we architect modern React applications using a type system and a design system? @glnnrys
109. How much value will _____ bring? @glnnrys
110. How much time will we save by adding _____ ? @glnnrys
111. Is modern the best? @glnnrys
112. There's a reason why new things keep coming out @glnnrys
113. Keep good practices that worked in the past @glnnrys
114. You don't have to use it because it's new @glnnrys
115. Don't let new things intimidate you @glnnrys
116. Write the best code possible @glnnrys
117. Keep using what you know best @glnnrys
118. Never stop learning @glnnrys
119. Never stop learning new things @glnnrys
120. ⚛ reactjs.org/blog/ twitter.com/reactjs github.com/facebook/react/issues ✉ this-week-in-react.org @glnnrys
121. Thank you @glnnrys · glennreyes.com