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

Building React Components Library (Conf Edition)

Rob
July 13, 2016
Technology
2
370

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

See All by Rob
The Truth Is Out There... Monitoring Your Isomorphic Application
operatino
0
120
Advanced SSR Caching in React
operatino
0
210
React Europe 2016 Recap
operatino
0
140
Библиотека UI компонентов, о которой вы всегда мечтали (RU)
operatino
1
1.1k
React - новая эра фронтенд разработки (RU)
operatino
3
530
The Developer's Guide to the React Component Libraries
operatino
3
710
Entering the new era of Front-end development with ReactJS
operatino
4
440
Building React Component Library (Meetup Edition)
operatino
1
510
The Style Guide Platform
operatino
6
1.4k

Other Decks in Technology

See All in Technology
re:Invent をおうちで楽しんでみた ～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
130
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
200
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Storage Browser for Amazon S3
miu_crescent
1
250
祝！Iceberg祭開幕！re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
3
320
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す！？~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
110
組織に自動テストを書く文化を根付かせる戦略（2024冬版） / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.8k
Oracle Cloud Infrastructure：2024年12月度サービス・アップデート
oracle4engineer
PRO
1
210
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
120
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
15k
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
630
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
570

Featured

See All Featured
Music & Morning Musume
bryan
46
6.2k
Site-Speed That Sticks
csswizardry
2
190
Thoughts on Productivity
jonyablonski
67
4.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Docker and Python
trallard
42
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k

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!