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

43e0fc25bbcc4a1bcf1e6139e424ee35?s=47 Adam Conrad
March 26, 2019
Programming
0
120

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

More Decks by Adam Conrad

See All by Adam Conrad
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
51
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
30
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
22
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
27
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
31

Other Decks in Programming

See All in Programming
D8a3623b157508fecdae1f8e756f362f?s=48 cmota
1
120
Bc87ea9c7a0f85b8761b716a677c6694?s=48 adammc331
0
160
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
120
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
560
49df09ab2eadd025342b9b3387936eb9?s=48 stefafafan
0
370
44f37c1fe3a6a56376bb41a338741355?s=48 ahiru
3
300
3f4e0340909015791f1712c52b116da7?s=48 tamadon
1
320
8b0e9a3684bd29ecece29db2582e38ae?s=48 norioikedo
0
260
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
5
2.5k
51f4d2341131b6b9bfa996bdb9b8dfa8?s=48 showmant
3
580
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
2
2.2k
Dc88edc1ac20d0a2387fdce3bb8f48cf?s=48 mkmy1123
1
170

Featured

See All Featured
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.3k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
12
1.3k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
4
280
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
15
520
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.2k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k

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?