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
2. Front-end Development Lead Liberty Global @ Amsterdam Robert Haritonov @operatino
3. SourceJS The Living Style Guide Platform github.com/sourcejs
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
24. react-storybook
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
33. react-cdk
37. @operatino More Inspiration
38. devcards
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!