Building React Components Library (Conf Edition)

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.

Bad3e55f0b96b80bc4ffb40d1c1414dc?s=128

Robert Haritonov

July 13, 2016
Tweet

Transcript

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

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

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. @operatino 1941 components 3239 components http://react-components.com http://ngmodules.org

  13. @operatino

  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
  15. @operatino Build

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

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

  18. @operatino Live Reload Hot Module Replacement Components

  19. @operatino Component Libraries

  20. react-styleguidist

  21. None
  22. None
  23. None
  24. react-storybook

  25. None
  26. None
  27. carte-blanche

  28. @operatino Carte Blanche • Auto gather all components from the

    code base • Generates random props combinations • Allows to configure and save own combinations
  29. @operatino Focus

  30. None
  31. None
  32. None
  33. react-cdk

  34. None
  35. None
  36. None
  37. @operatino More Inspiration

  38. devcards

  39. None
  40. None
  41. None
  42. Recon

  43. react-native-storybook

  44. React Native Playground

  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!
  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/
  47. Robert Haritonov @operatino & rhr.me Thanks!