React's Lost Socks: Where Did I Put that Component?

React's Lost Socks: Where Did I Put that Component?

This talk aims to add structure for production-ready React applications. Hopefully.

43e0fc25bbcc4a1bcf1e6139e424ee35?s=128

Adam Conrad

March 26, 2019
Tweet

Transcript

  1. React’s Lost Socks Where did I put that component?

  2. None
  3. None
  4. (Everything in its right place)

  5. Who in the h*ck are you??

  6. @theadamconrad

  7. Why are we here?

  8. React deserves structure

  9. None
  10. None
  11. None
  12. Such segmentati on

  13. Such segmentati on Lol wut tests

  14. Such segmentati on Lol wut tests Are u too good

    for ur home
  15. Such segmentati on Lol wut tests Are u too good

    for ur home
  16. None
  17. None
  18. None
  19. None
  20. Some prereqs

  21. Some prereqs

  22. None
  23. CCU Pattern

  24. CCU Pattern MVC for the front-end

  25. CCU Pattern MVC for the front-end Component

  26. CCU Pattern MVC for the front-end Component => Model Container

  27. CCU Pattern MVC for the front-end Component => Model Container

    => Controller Utility
  28. CCU Pattern MVC for the front-end Component => Model Container

    => Controller Utility => View
  29. None
  30. Prereqs For real apps React (duh) Apollo & GraphQL React

    Router Styled-components Formik Typescript (optional)
  31. None
  32. 0. Set up routes

  33. None
  34. 1. Add a page/route

  35. None
  36. None
  37. 2. Add a component

  38. None
  39. None
  40. 3. Add tests (you know you want to)

  41. None
  42. None
  43. 4. Component too big? Split it up

  44. None
  45. None
  46. None
  47. 5. Component doing too much? Add a utility

  48. None
  49. None
  50. None
  51. 6. Nested containers? Not a problem!

  52. None
  53. None
  54. None
  55. None
  56. None
  57. 7. Writing data? We got that too!

  58. None
  59. None
  60. None
  61. None
  62. None
  63. 8. App doing too much? Split it up!

  64. None
  65. 9. THERE IS NO STEP NINE

  66. None
  67. In summary

  68. In summary Touching data? CONTAINER

  69. In summary Touching data? CONTAINER Passing data? COMPONENT

  70. In summary Touching data? CONTAINER Passing data? COMPONENT Adding logic?

    UTILITY
  71. None
  72. Kthnxbye. questions?