Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building modern React applications

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.

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

October 05, 2019
Tweet

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

  18. None
  19. Google Trends

  20. State of JS 2018

  21. None
  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

  27. None
  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

  33. None
  34. People love solving problems

  35. How are problems solved in React today?

  36. State management

  37. State management

  38. None
  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
  75. None
  76. Design systems

  77. None
  78. None
  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?
  82. None
  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