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

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

43e0fc25bbcc4a1bcf1e6139e424ee35?s=47 Adam Conrad
March 26, 2019
Programming
0
130

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

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

43e0fc25bbcc4a1bcf1e6139e424ee35?s=128

Adam Conrad

March 26, 2019
Tweet

More Decks by Adam Conrad

See All by Adam Conrad
Code review in JavaScript
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
280
The Dos and Don'ts of CBRA
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
40
A-Frame and You
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
25
UX and Performance
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
33
SX - Startup Experience
43e0fc25bbcc4a1bcf1e6139e424ee35?s=48 acconrad
0
38

Other Decks in Programming

See All in Programming
Cybozu GoogleI/O 2022 LT会 - Input for all screens
15bf72ac0417f0aab38b6f0ab084d605?s=48 jaewgwon
0
270
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120
GitHub Actions を導入した経緯
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
420
IE Graduation Certificate
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
6
4.7k
A Philosophy of Software Design 後半
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
10
2.6k
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
100
Chart実装が楽になりました。
622c25352cca9db43a10c0f3d4f73b75?s=48 keisukeyamagishi
0
110
ISUCON12 事前講習
2e7087b86608d4497c209eb9ba14d8f5?s=48 rosylilly
3
4k
From Java through Scala to Clojure
6dd9394072d0d29aef3692f80298c36d?s=48 lagenorhynque
0
150
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
1.7k
Airflowはすごいぞ！
65389cd2b6fdc531dcc4af999e864593?s=48 hankehly
0
370
Jakarta EE 10 and Beyond
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
1.8k

Featured

See All Featured
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
10k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
447
30k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M
Typedesign – Prime Four
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
33
1.3k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.7k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
126
8.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.1k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
48
2.5k

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?