Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

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
100
A-Frame and You
Avatar for Adam Conrad acconrad
0
56
UX and Performance
Avatar for Adam Conrad acconrad
0
74
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
79

Other Decks in Programming

See All in Programming
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
320
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
440
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
0
170
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
340
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
170
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
120
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
450
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
21
21k
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
720
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
120
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
7.9k

Featured

See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
450
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
560
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
910
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
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?