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?
   

   View Slide

2. View Slide

3. View Slide

4. (Everything in its right place)
   

   View Slide

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

   View Slide

6. @theadamconrad
   

   View Slide

7. Why are we here?
   

   View Slide

8. React deserves structure
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Such
    segmentati
    on
    

    View Slide

13. Such
    segmentati
    on
    Lol wut tests
    

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. Some prereqs
    

    View Slide

21. Some prereqs
    

    View Slide

22. View Slide

23. CCU Pattern
    

    View Slide

24. CCU Pattern
    MVC for the front-end
    

    View Slide

25. CCU Pattern
    MVC for the front-end
    Component
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

30. Prereqs
    For real apps
    React (duh)
    Apollo & GraphQL
    React Router
    Styled-components
    Formik
    Typescript (optional)
    

    View Slide

31. View Slide

32. 0.
    Set up routes
    

    View Slide

33. View Slide

34. 1.
    Add a page/route
    

    View Slide

35. View Slide

36. View Slide

37. 2.
    Add a component
    

    View Slide

38. View Slide

39. View Slide

40. 3.
    Add tests (you know you want to)
    

    View Slide

41. View Slide

42. View Slide

43. 4.
    Component too big? Split it up
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. 5.
    Component doing too much? Add a utility
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. 6.
    Nested containers? Not a problem!
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. 7.
    Writing data? We got that too!
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. 8.
    App doing too much? Split it up!
    

    View Slide

64. View Slide

65. 9.
    THERE IS NO STEP NINE
    

    View Slide

66. View Slide

67. In summary
    

    View Slide

68. In summary Touching data? CONTAINER
    

    View Slide

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

    View Slide

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

    View Slide

71. View Slide

72. Kthnxbye.
    questions?
    

    View Slide