Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The React Cookbook: Advanced Recipes to Level Up Your Next App

58 views

Published on

Simon Bloom
TWG

Overview
It’s finally happened: your React project has grown from fledgling side-hobby into serious web application! Will your architecture hold up to your project’s new found scale, or will you let it become an incomprehensible jumble of tangled wires?

Come learn simple, practical, and tangible patterns for making your current (and next) React application more composable, easier to reason about, and just overall more pleasurable to work with!

Objective
To introduce junior and intermediate developers to advanced react patterns that they can practically start using now.

Target Audience
Junior and intermediate React developers

Assumed Audience Knowledge
Intro-to-mid level experience with React

Level
Late Beginner / Intermediate

Five Things Audience Members Will Learn
The higher order component pattern
The render props pattern
React’s new context API
The compound component pattern
New React features: error boundaries and portals

Published in: Internet
  • Be the first to comment

  • Be the first to like this

The React Cookbook: Advanced Recipes to Level Up Your Next App

  1. 1. THE REACT COOK BOOK
  2. 2. SIMON BLOOM work TWG teach HackerYou Canada Learning Code Bridge School @simonwbloom
  3. 3. COOKING without following a recipe
  4. 4. RECIPES =
  5. 5. CODE RECIPES =
  6. 6. DESIGN PATTERNS
  7. 7. “Solutions to recurring problems” DESIGN PATTERNS:
  8. 8. RECURRING SOFTWARE PROBLEM DESIGN PATTERN
  9. 9. DESIGN PATTERNS are the recipes that help us cook delicious react apps
  10. 10. Let’s add some recipes to your react cookbook.
  11. 11. REACT TOP CHEFS
  12. 12. Our Cookbook Context API Presentation/Container Components Render Props
  13. 13. Cookbook Recipe #1: Context API Chef Kent. C. Dodds
  14. 14. Passing props can be annoying.
  15. 15. <App> <Menu> props
  16. 16. <Dashboard> <Sidebar> <Signout>
  17. 17. <Profile> <Sidebar> <Settings> <ResetPassword>
  18. 18. PROP DRILLING
  19. 19. “USE REDUX”
  20. 20. Why is this so hard?
  21. 21. Sometimes we want our state to be global, but React doesn’t.
  22. 22. No way to directly access parent state from a deeply nested component….
  23. 23. ...until now!!!!
  24. 24. CONTEXT API: “a way to pass data through the component tree without having to pass props down manually at every level.”
  25. 25. <Profile> <Sidebar> <Settings> <ResetPassword>
  26. 26. <Profile> <Sidebar> <Settings> <ResetPassword>
  27. 27. <Provider> GLOBAL STATE CONTAINER
  28. 28. <Consumer> HAS ACCESS TO THE PROVIDER
  29. 29. <App> <Provider> <Dashboard> <Sidebar> <Consumer> this.state.user
  30. 30. <App> <Provider> <Dashboard> <Sidebar> <Consumer> this.state.user <Signout> <Consumer>
  31. 31. <App> this.state.user <Provider> <Dashboard> <Sidebar> <Nav> <Consumer> <My Profile> <Main> <Consumer>
  32. 32. When do I use it?
  33. 33. - When you find yourself passing props down deep into your tree - You truly need ‘global state’ (auth, user settings, translations, themes) - Someone tells you you need redux
  34. 34. What can I cook with it?
  35. 35. `
  36. 36. Recipe #2: Presentation / Container components Chef Dan Abramov
  37. 37. <WeatherWidget />
  38. 38. Request some weather data from the API Display that data on the page
  39. 39. Request Data Display Data
  40. 40. Bloated components!
  41. 41. Unfriendly to other devs Difficult to reason about Hard to modify / reuse
  42. 42. How do we avoid this?
  43. 43. separation of concerns.
  44. 44. Concern Something your code is responsible for.
  45. 45. Weather Widget Fetching Data Displaying Data
  46. 46. Fetching Data Logic Displaying Data UI
  47. 47. Container Component for logic Presentation Component for user interface
  48. 48. Container Component a.k.a “What it does”
  49. 49. <WeatherWidgetContainer>
  50. 50. Presentational Component a.k.a “What it looks like”
  51. 51. <WeatherWidget>
  52. 52. Why is this useful?
  53. 53. Readable Easier to hunt down bugs Re-usable Testable
  54. 54. When do I use it?
  55. 55. “Too many things!!” Mixture of behaviour/presentation Bloated Component
  56. 56. Recipe #3: Render Props Chef Michael Jackson
  57. 57. Puppy Voting App They’re good dogs Brent
  58. 58. <PuppyFeed>
  59. 59. 1. GET /api/puppies 2. Surface ‘loading’ spinner 3. Render adorable puppies 4. If error, render error
  60. 60. <KittenFeed>
  61. 61. 1. GET /api/kittens 2. Surface ‘loading’ spinner 3. Render adorable kittens 4. If error, render error
  62. 62. 1. GET /api/kittens 2. Surface ‘loading’ spinner 3. Render adorable kittens 4. If error, render error
  63. 63. <Petfeed>
  64. 64. <UserProfile>
  65. 65. 1. GET /api/profile 2. Surface ‘loading spinner’ 3. Render user’s profile 4. If error, render error
  66. 66. 1. GET /api/profile 2. Surface ‘loading spinner’ 3. Render user’s profile 4. If error, render error
  67. 67. Tight coupling of logic + presentation made our components less reusable and flexible
  68. 68. RENDER PROPS: “a simple technique for sharing code between React components”
  69. 69. The “render” prop
  70. 70. What they have in common: - Request data from API - Need loading states - Have error states
  71. 71. How they differ - Render different things - Render different spinners
  72. 72. Common logic, different presentation
  73. 73. <Resource /> <Petfeed />
  74. 74. This is the key!!!
  75. 75. Same logic, different presentation = huge win
  76. 76. Why render props are so important: - Self document incredibly well - Separate presentation from logic - Decrease code duplication - Extendable - Reusable - Abstract away logic
  77. 77. When to use them - Don’t start with a render prop. Start simple, refactor later - Share logic between components but not UI - Other developers to re-use your code - Defer rendering UI to a later date - Dealing with common states/events in different components
  78. 78. Final Thoughts
  79. 79. Your New Cookbook Kent C Dodds’ homemade Context API…………..….….. 2 Presentation/Container Components a la Abramov….….3 Chef Jackson’s Render Props Souffle………………….……4
  80. 80. Battle Tested Shareable Fun to Use Familiar
  81. 81. Recipes are just the starting point. Go out and write your own recipes, build your own cookbooks!
  82. 82. Thank you! @simonwbloom

×