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

Building React Components Library (Conf Edition)

Rob
July 13, 2016

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.

Rob

July 13, 2016
Tweet

More Decks by Rob

Other Decks in Technology

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