Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
150
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
690
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
87
A-Frame and You
Avatar for Adam Conrad acconrad
0
49
UX and Performance
Avatar for Adam Conrad acconrad
0
63
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
77

Other Decks in Programming

See All in Programming
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
4
510
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
240
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
880
横断組織出身のQAEがインプロセスQAEでつまずいたこと・活かせたこと
Avatar for Taiki Yamashita ty89
0
170
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
390
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
6
860
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
1k
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
4
490
今さら聞けないCancellationToken
Avatar for tkym htkym
0
160
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
300
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
530

Featured

See All Featured
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.6k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
290
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
140
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
330
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
44k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
370
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
410
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k

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?