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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
710
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
96
A-Frame and You
Avatar for Adam Conrad acconrad
0
55
UX and Performance
Avatar for Adam Conrad acconrad
0
74
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
78

Other Decks in Programming

See All in Programming
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
460
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
420
高専、大学編入、そして未踏へ〜プロダクト開発とキャリアの歩み - Technical College, University Transfer, and On to “Mitou” / My Journey in Product Development and Career
Avatar for __pkmiya pkmiya
0
130
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
0
210
週末にAI-DLCを本気で回したら$1,600溶けた
Avatar for Atsushi Shimizu hbashimizu
0
120
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
2
300
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
330
不幸な GC
Avatar for Chen chencmd
0
870
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
130
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
280
이 함수, 실패하면 어떻게 되나요? null부터 Rich Errors까지, Kotlin 에러 처리 15년
Avatar for TaeHee Lee haeti2
0
130

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
510
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
10k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
190
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
550
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
660
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
490

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?