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
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
700
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
93
A-Frame and You
Avatar for Adam Conrad acconrad
0
53
UX and Performance
Avatar for Adam Conrad acconrad
0
69
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
78

Other Decks in Programming

See All in Programming
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
170
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
510
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
160
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
180
The Bowling Game - From Imperative to Functional Programming - Part 1
Avatar for Philip Schwarz philipschwarz
PRO
0
350
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
16k
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
120
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
590
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
140
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
160
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
250
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
180

Featured

See All Featured
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
610
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
260
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
160
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
170
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420

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?