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

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

Transcript

1. React’s Lost Socks Where did I put that component?
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
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
20. Some prereqs
21. Some prereqs
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
30. Prereqs For real apps React (duh) Apollo & GraphQL React Router Styled-components Formik Typescript (optional)
32. 0. Set up routes
34. 1. Add a page/route
37. 2. Add a component
40. 3. Add tests (you know you want to)
43. 4. Component too big? Split it up
47. 5. Component doing too much? Add a utility
51. 6. Nested containers? Not a problem!
57. 7. Writing data? We got that too!
63. 8. App doing too much? Split it up!
65. 9. THERE IS NO STEP NINE
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
72. Kthnxbye. questions?