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

Art of building reusable component

Anenth
October 07, 2017
Education
0
760

Art of building reusable component

How to think about structuring your components

Anenth

October 07, 2017
Tweet

Other Decks in Education

See All in Education
Ch4_-_Cours_2.pdf
bernhardsvt
0
210
OpenAI Education Forum 資料「教育と生成AI ～事例から見えるこれからの活用～」
luiyoshida
2
660
i-GIP 2025 中高生のみなさんへ資料
202200
0
180
日本電子専門学校ネットワークセキュリティ科_学科紹介.pdf
ccyc
0
840
Prógram La Liberazione
olafurtr90
0
180
HCL Domino 14.5 EAP2 Domino IQ について
harunakano
0
110
Ch4_-_Cours_1.pdf
bernhardsvt
0
200
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
America and the World
oripsolob
0
170
第1回大学院理工学系説明会｜東京科学大学（Science Tokyo）
sciencetokyo
PRO
0
2k
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
140

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cult of Friendly URLs
andyhume
78
6.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
A Tale of Four Properties
chriscoyier
158
23k
Agile that works and the tools we love
rasmusluckow
328
21k
Being A Developer After 40
akosma
91
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
How GitHub (no longer) Works
holman
314
140k

Transcript

  1. A R T O F B U I L D

    I N G R E U S A B L E C O M P O N E N T S

  2. Anenth (@anenthv) Senior front end engineer recruiterbox

  3. T H E M A G I C Functional components

    + CSS

  4. Text Input Button Card Page

  5. Page Card

  6. Text Input Button

  7. Modifiers

  8. None
  9. None
  10. None
  11. None

  12. Modifiers

  13. None

  14. Card Card Header

  15. Text Grid

  16. None

  17. • Decouple 3rd party libs • Documentation - React story

    book • Pluggable nature of CSS • Faster feature delivery • Happy developers • Too many props means you are in trouble! • We + Designers

  18. Demo time http://bit.ly/art-rcom

  19. T H A N K Y O U Anenth (@anenthv)