Art of building reusable component

How to think about structuring your components

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
   

   View Slide

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

   View Slide

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

   View Slide

4. Text
   Input
   Button
   Card
   Page
   

   View Slide

5. 
   Page Card
   

   View Slide

6. Text
   Input
   Button
   

   View Slide

7. Modifiers
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Modifiers
    

    View Slide

13. View Slide

14. Card
    Card Header
    

    View Slide

15. Text
    Grid
    

    View Slide

16. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide