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
COOK
BOOK
SIMON BLOOM
work
TWG
teach
HackerYou
Canada Learning Code
Bridge School
@simonwbloom
COOKING
without following
a recipe
RECIPES
=
CODE
RECIPES =
DESIGN PATTERNS
“Solutions to
recurring problems”
DESIGN PATTERNS:
RECURRING
SOFTWARE
PROBLEM
DESIGN
PATTERN
DESIGN PATTERNS
are the recipes that
help us cook
delicious react apps
Let’s add some
recipes to your
react cookbook.
REACT
TOP
CHEFS
Our Cookbook
Context API
Presentation/Container
Components
Render Props
Cookbook
Recipe #1:
Context API
Chef Kent. C. Dodds
Passing props can
be annoying.
<App>
<Menu>
props
<Dashboard>
<Sidebar>
<Signout>
<Profile>
<Sidebar>
<Settings>
<ResetPassword>
PROP DRILLING
“USE REDUX”
Why is this so
hard?
Sometimes we
want our state to
be global, but React
doesn’t.
No way to directly
access parent state
from a deeply nested
component….
...until
now!!!!
CONTEXT API:
“a way to pass data through the
component tree without having to pass
props down manually at every level.”
<Profile>
<Sidebar>
<Settings>
<ResetPassword>
<Profile>
<Sidebar>
<Settings>
<ResetPassword>
<Provider>
GLOBAL STATE CONTAINER
<Consumer>
HAS ACCESS TO THE PROVIDER
<App>
<Provider>
<Dashboard>
<Sidebar>
<Consumer>
this.state.user
<App>
<Provider>
<Dashboard>
<Sidebar>
<Consumer>
this.state.user
<Signout>
<Consumer>
<App> this.state.user
<Provider>
<Dashboard> <Sidebar>
<Nav>
<Consumer>
<My Profile>
<Main>
<Consumer>
When do I
use it?
- When you find yourself passing
props down deep into your tree
- You truly need ‘global state’ (auth,
user settings, tran...
What can I
cook with it?
`
Recipe #2:
Presentation /
Container
components
Chef Dan Abramov
<WeatherWidget />
Request some weather data
from the API
Display that data on the page
Request Data
Display Data
Bloated
components!
Unfriendly to other devs
Difficult to reason about
Hard to modify / reuse
How do we avoid this?
separation of concerns.
Concern
Something your code is
responsible for.
Weather Widget
Fetching
Data
Displaying
Data
Fetching Data
Logic
Displaying Data
UI
Container Component for
logic
Presentation Component for
user interface
Container
Component
a.k.a “What it does”
<WeatherWidgetContainer>
Presentational
Component
a.k.a “What it looks like”
<WeatherWidget>
Why is this useful?
Readable
Easier to hunt down bugs
Re-usable
Testable
When do I
use it?
“Too many things!!”
Mixture of
behaviour/presentation
Bloated Component
Recipe #3:
Render Props
Chef Michael Jackson
Puppy
Voting
App
They’re good dogs Brent
<PuppyFeed>
1. GET /api/puppies
2. Surface ‘loading’ spinner
3. Render adorable puppies
4. If error, render error
<KittenFeed>
1. GET /api/kittens
2. Surface ‘loading’ spinner
3. Render adorable kittens
4. If error, render error
1. GET /api/kittens
2. Surface ‘loading’ spinner
3. Render adorable kittens
4. If error, render error
<Petfeed>
<UserProfile>
1. GET /api/profile
2. Surface ‘loading spinner’
3. Render user’s profile
4. If error, render error
1. GET /api/profile
2. Surface ‘loading spinner’
3. Render user’s profile
4. If error, render error
Tight coupling of logic +
presentation made our
components less reusable
and flexible
RENDER PROPS:
“a simple technique for sharing code
between React components”
The “render” prop
What they have in common:
- Request data from API
- Need loading states
- Have error states
How they differ
- Render different things
- Render different spinners
Common logic, different
presentation
<Resource />
<Petfeed />
This is the key!!!
Same logic, different
presentation = huge win
Why render props are so
important:
- Self document incredibly well
- Separate presentation from logic
- Decrease code dupl...
When to use them
- Don’t start with a render prop. Start simple,
refactor later
- Share logic between components but not U...
Final Thoughts
Your New Cookbook
Kent C Dodds’ homemade Context API…………..….….. 2
Presentation/Container Components a la Abramov….….3
Chef...
Battle
Tested
Shareable Fun
to Use
Familiar
Recipes are just the
starting point.
Go out and write your own
recipes, build your own
cookbooks!
Thank you!
@simonwbloom
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
The React Cookbook: Advanced Recipes to Level Up Your Next App
Upcoming SlideShare
Loading in …5
×

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

330 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

×