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

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

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
680
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
76
A-Frame and You
Avatar for Adam Conrad acconrad
0
46
UX and Performance
Avatar for Adam Conrad acconrad
0
61
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
73

Other Decks in Programming

See All in Programming
3分でわかるatama plusのQA/about atama plus QA
Avatar for atama plus atamaplus
0
120
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
130
Strategy for Finding a Problem for OSS: With Real Examples
Avatar for Chikahiro Tokoro kibitan
0
140
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
830
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
560
PCOVから学ぶコードカバレッジ #phpcon_odawara
Avatar for hideki kinjyo o0h
PRO
0
230
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
180
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
3
740
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
130
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
120
Swift Concurrency Type System
Avatar for Yasuhiro Inami inamiy
0
350
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
270
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
250
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
210
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190

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?