Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React's Lost Socks: Where Did I Put that Compon...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Adam Conrad Adam Conrad
March 26, 2019
Programming
160
0

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

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

Avatar for Adam Conrad

Adam Conrad

March 26, 2019

More Decks by Adam Conrad

See All by Adam Conrad
Code review in JavaScript
Avatar for Adam Conrad acconrad
0
720
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
100
A-Frame and You
Avatar for Adam Conrad acconrad
0
56
UX and Performance
Avatar for Adam Conrad acconrad
0
74
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
79

Other Decks in Programming

See All in Programming
선언형 햅틱 라이브러리 진동을 소개합니다
Avatar for HyunWoo Lee l2hyunwoo
1
110
クラウドエージェントは、 何がそんなに便利なのか / what makes cloud agents so useful
Avatar for r-kagaya rkaga
3
620
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
4.9k
Zero-Tap Sign-In対応、結局何をすればいいの？
Avatar for mitohato14 mitohato14
0
1.1k
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
2k
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
1
270
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
[2026-10-14](C)Re:ゼロから始める異世界生活〜始まりの終わりと終わりの始まり〜
Avatar for tosite tosite
0
180
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
170
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
180
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
220
Vapor Mode でアクセシビリティは 壊れないか検証した話
Avatar for fuqda fuqda
1
270

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
PRO
92
590k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
1
290
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
430
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
780
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
460

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?