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?
4. Why do we love building modern applications?
5. It's exciting
6. ✨ It's new
7. ✨ It's new for a reason
8. Modern apps lets us
 step out of the comfort zone
9. Modern apps lets us
 keep moving forward
10. Modern apps lets us
 be creative
11. What is modern?
12. 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.
13. Bleeding edge
14. On the web ...
15. On the web
 there's new libraries every day
16. Anything that came out yesterday
 is not modern anymore
17. React
19. Google Trends
20. State of JS 2018
22. Don't reinvent the wheel
 No need to set up and configure from scratch
23. Create React App
24. Create React App % Easy to use Flexibility Ecosystem
25. Gatsby
26. Gatsby Blogs ⚡ Static sites Ecosystem
28. Server rendering Dynamic routing Zero-config
29. Others are fine too!
 Use what works best for you
30. Why?
31. Community Support ❤
32. Powerful
34. People love solving problems
35. How are problems solved in React today?
36. State management
37. State management
39. Just React
40. Kent C. Dodds React is a state management library.
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} /> ); }
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 ThemeContext = React.createContext('light');
43. 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> );
44. 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} /> ); }
45. <App /> <Header /> <Content /> <Footer /> <Articles /> ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider />
46. <App /> <Header /> <Content /> <Footer /> <Articles /> ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider />
47. Context state doesn't need to be globally accessible
48. Put Context state as close as needed
49. What's new in React?
50. Hooks
51. 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> ); }
52. Function components No more stateless components
53. Class components No more stateful components
54. Class components still a thing?
55. Use hooks for new components If the team is fine with it
56. 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
57. Suspense
58. Suspense lets components wait for something before rendering
59. Suspend the render until new data is loaded from external sources
60. const HeavyComponent = React.lazy(() => import('./HeavyComponent')); const App = () => ( <React.Suspense fallback={<Loading />}> <div> <HeavyComponent /> </div> </React.Suspense> );
61. Other new React features
62. Other new React features Fragments Error Boundaries React.memo() React.createPortal() DevTools Profiler API
63. Patterns
64. const EnhancedComponent = higherOrderComponent(WrappedComponent); Higher Order Component
65. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> Render Props
66. 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
67. How do we fetch data in React?
68. class App extends React.Component { constructor(props) { super(props); this.state = { data: null, error: null, loading: false, }; } componentDidMount() { this.setState({ loading: true }); fetch('https://api.fromsomewhere.com') .then(response => response.json()) .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } // ... }
69. function App() { const [data, setState] = useState({ data: null, error: null, loading: false }); useEffect(() => { setState({ loading: true }); fetch('https://api.fromsomewhere.com') .then(response => response.json()) .then(data => setState({ data, loading: false })) .catch(error => setState({ error, loading: false })); }, []); // ... }
70. Data fetching with Suspense is coming
71. Systems
72. Type systems
73. Why would I need a type system?
74. Why would I need a type system? Confidence Auto suggestions No more prop types
76. Design systems
79. Scales & Theming constraints
80. // 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>
81. How do we architect modern React applications
 using a type system and a design system?
83. How much value will _____ bring?
84. How much time will we save by adding _____ ?
85. Always start simple
86. No one will care about your folder structure
87. Is modern the best?
88. Rarely.
89. There's a reason why new things keep coming out
90. Keep good practices that worked in the past
91. You don't have to use it because it's new
92. Don't let new things intimidate you
93. Write the best code possible
94. Keep using what you know best
95. Never stop
 learning
96. Never stop
 learning new things
97. Thank you @glnnrys · glennreyes.com