Building React Components Library (Conf Edition)

Video: https://skillsmatter.com/skillscasts/8140-building-react-components-library

React provides a great foundation for building and implementing reusable components, that whole team (and community) could greatly benefit from. But to make the code actually reusable, it should be properly presented and documented. Robert will guide you through the key patterns of building React components library with proper navigation, rendered components sandbox and API description.

Transcript

1. Building React
   COMPONENTS
   LIBRARY
   Robert Haritonov
   @operatino & rhr.me
   

   View Slide

2. Front-end Development Lead
   Liberty Global @ Amsterdam
   Robert Haritonov @operatino
   

   View Slide

3. SourceJS
   The Living Style Guide Platform
   github.com/sourcejs
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. @operatino
    1941 components 3239 components
    http://react-components.com
    http://ngmodules.org
    

    View Slide

13. @operatino
    

    View Slide

14. @operatino
    Why do you need a Component Library
    • Speed up UI development cycle
    • Share re-usable components documentations and
    examples
    • Keep your product UX consistent
    

    View Slide

15. @operatino
    Build
    

    View Slide

16. @operatino
    Change
    Code
    Reload Type
    Click
    Scroll
    Validate
    Prepare state
    

    View Slide

17. @operatino
    Change
    Code
    Reload Type
    Click
    Scroll
    Validate
    Prepare state
    

    View Slide

18. @operatino
    Live Reload Hot Module
    Replacement
    Components
    

    View Slide

19. @operatino
    Component
    Libraries
    

    View Slide

20. react-styleguidist
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. react-storybook
    

    View Slide

25. View Slide

26. View Slide

27. carte-blanche
    

    View Slide

28. @operatino
    Carte Blanche
    • Auto gather all components from the code base
    • Generates random props combinations
    • Allows to configure and save own combinations
    

    View Slide

29. @operatino
    Focus
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. react-cdk
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. @operatino
    More Inspiration
    

    View Slide

38. devcards
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. Recon
    

    View Slide

43. react-native-storybook
    

    View Slide

44. React Native Playground
    

    View Slide

45. @operatino
    Takeaways
    • Use Component Libraries to improve development speed
    • Leverage the auto-documentation tooling for easy
    components discovery
    • Write more re-usable code
    • Automate all the things!
    

    View Slide

46. @operatino
    Links
    • https://sourcejs.com/
    • http://react-styleguidist.js.org/
    • https://github.com/kadirahq/react-storybook/
    • https://github.com/kadirahq/react-cdk/
    • https://github.com/carteb/carte-blanche/
    • https://github.com/steos/reactcards/
    

    View Slide

47. Robert Haritonov
    @operatino & rhr.me
    Thanks!
    

    View Slide