Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Avatar for Adam Conrad Adam Conrad
March 26, 2019
Programming
0
150

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
Tweet

More Decks by Adam Conrad

See All by Adam Conrad
Code review in JavaScript
Avatar for Adam Conrad acconrad
0
660
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
72
A-Frame and You
Avatar for Adam Conrad acconrad
0
44
UX and Performance
Avatar for Adam Conrad acconrad
0
59
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
72

Other Decks in Programming

See All in Programming
AIコードレビューがチームの"文脈"を 読めるようになるまで
Avatar for Takumi Maruyama marutaku
0
360
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
190
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
430
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
390
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
210
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
420
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
150
認証・認可の基本を学ぼう後編
Avatar for kaza kouyuume
0
240
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
260
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
160
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
130
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
270

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k

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?