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

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?