The how and why of flexible React components

Transcript

1. The how and why of flexible React components THE HOW

   AND WHY OF FLEXIBLE REACT COMPONENTS

2. Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode

3. @gurlcode

4. flexible @gurlcode

5. @gurlcode

6. @gurlcode

7. with Tooltip withTooltip @gurlcode

8. with Tooltip with Dot withTooltip withDot @gurlcode

9. with Tooltip with Dot with Modal withDot withModal withTooltip @gurlcode

10. <BlockComponent className=“block block-md block—orange” message={message} withTooltip={false} withModal modalProps={modalProps} userId={userId} userName={userName}

    withDot={false} experimentRunning experimentId={experimentId} colorChange={false} showMessageOnLoad onModalClose={() => {}} hasRoundedCorners withAnalytics analyticsProps={analyticsProps} /> BEWARE THE APROPSCALYPSE <BlockComponent className=“block block—md block—orange” withTooltip={false} withDot={false} withModal modalProps={modalProps} onModalClose={onModalClose} onMouseOver={onMouseOver} withExperiment experimentId={experimentId} userName={userName} userId={userId} analyticsProps={analyticsProps} roundedCorners /> @gurlcode

11. @gurlcode

12. @gurlcode

13. You have another reservation at this time. @gurlcode

14. Is the user logged in? State of subscription? State of

    class? yes unsubscribed subscribed available unavailable reserved cancelled no join reactivate reserve disable cancel join
15. None

16. @gurlcode

17. reusable !== flexible @gurlcode

18. Flexibility is about more than reusability. It’s about the ability

    understand and augment. @gurlcode

19. @gurlcode

20. @gurlcode

21. <ScheduleCta type={?} /> @gurlcode

22. @gurlcode

23. @gurlcode

24. @gurlcode

25. @gurlcode

26. Keep business logic out of your components. @gurlcode

27. @gurlcode

28. Centralized logic is easier to reason about @gurlcode

29. Test the component separate from the logic @gurlcode

30. @gurlcode

31. <ScheduleCta type={?} /> @gurlcode

32. @gurlcode

33. @gurlcode

34. @gurlcode

35. @gurlcode

36. None
37. None
38. None

39. @gurlcode

40. @gurlcode

41. None

42. @gurlcode

43. @gurlcode

44. @gurlcode

45. @gurlcode

46. <ScheduleCta type={?} /> @gurlcode

47. components[type] @gurlcode

48. components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable:

    DisableCta, reactivate: ReactivateCta } @gurlcode

49. const Component = components[type]; @gurlcode

50. const Component =`${left || right}Sidebar`; @gurlcode

51. const Component = props.isCard ? ( <Card> <Content /> </Card>

    ) : (<Content />); @gurlcode

52. @gurlcode

53. @gurlcode

54. @gurlcode

55. @gurlcode

56. @gurlcode

57. <ScheduleCta type={?} className=“” />

58. @gurlcode

59. Decreased prop complexity Use whatever logic we want Use individual

    CTAs alone Add & remove CTAs with ease Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease @gurlcode

60. CTAs added and removed for A/B tests Removing Disable CTA

    on some pages Classnames changed Messaging changed for ReserveCta Ask for specific CTA on specific page @gurlcode

61. Hmm… @gurlcode

62. Render Props* *children as a function @gurlcode

63. … so what if children were a function? @gurlcode

64. @gurlcode

65. ? ? ? ? ? ? ? ? ? ?

    ? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode

66. @gurlcode

67. @gurlcode

68. @gurlcode

69. @gurlcode

70. @gurlcode

71. @gurlcode

72. Render Props === state delegate children function === UI handler

    @gurlcode

73. https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode

74. @gurlcode

75. you === flexible @gurlcode

76. @gurlcode

77. Know your traps. @gurlcode

78. Kill your darlings. @gurlcode

79. Start with the ideal API Let the API inform the

    component design Decide what level of magic you want Business logic does not belong in components Render Props is awesome (use it!) Be flexible as an engineer (know your traps, kill your darlings) @gurlcode

80. Thank you! Content by Jenn Creighton Illustrations by Janny Ji

    (jannyji.com) @gurlcode