On the way to making React components more reusable

Transcript

1. 0O
   UIF
   XBZ
   UP
   NBLJOH
   3FBDU
   DPNQPOFOUT
   NPSF
   SFVTBCMF
   Olena Sovyn (@frontendgirl)
2. Olena Sovyn (@frontendgirl) ! & "
3. ❤ 3FBDU
 3FEVY
   -PEBTI
   3FBDU
   4UPSZCPPL
   GVODUJPOBM
   QSPHSBNNJOH
5. 0O
   UIF
   XBZ
   UP
   NBLJOH
   3FBDU
   DPNQPOFOUT
   NPSF
   SFVTBCMF
   Olena Sovyn (@frontendgirl)
6. 
   ZFBS
   BHP
   
   
   
7. 8IZ
   
9. 8IZ
   )PX
   
10. Why aren’t we creating reusable components in the first place
11. Hero Header Button Search Input Search Results Search Result Item
14. repeatability in UI or behaviour can help to define what should be a component
15. How can we think about our project in the components- first approach
16. 4UPSZCPPL
18. "OZ
    PUIFS
    TJNJMBS
    UPPM - Carte Blanche (https://github.com/carteb/carte-blanche) - Electrode Explorer (http://www.electrode.io/#electrode- tools) - Chromatic (https://github.com/meteor/chromatic/)
19. https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers- fb849b06187a
20. 8IZ
    TUPSZCPPL
    BQQSPBDI - make us think about the components like totally independent parts of the app - make something the first source of truth, a dictionary for our modular UI - give your component place where they can leave - possibility to test UI separately from the complex behaviour - deeper understanding from the box what state should be handled on the component level and what should go to Flux/Redux
21. (PPE
    UIJOHT
    UP
    SFNFNCFS - don’t build functionality of the components that is not currently used in the app - don’t rely on the default styles that are in the components library (storybook etc.)
22. Why when we have two similar components aren’t we making it one
23. Coding Testing Design Verify Coding Testing Design Verify iteration n n + 1 n - 1
26. https://www.youtube.com/watch?v=hEGg-3pIHlE
27. We reusable simple to reuse
28. How can we make components easy to reuse
30. &YQPTVSF
    XIBU
    QSPQT
    TIPVME
    CF
    QBTTFE - add PropTypes for our components - flowtype - auto-complete in the IDE - check how component is used in the stories in the storybook - documentation - make the tools generate documentation for you: - “addon-info” in the storybook - react styleguidist - build-in + JSDoc comment blocks
31. 2, 3, 4, 5 projects?
32. Why aren’t we making component reusable between them
33. 8IBU
    JG
     second project is done in Angular? OH3FBDU
34. 8IBU
    JG
     first project has styles in *.scss, and second has in *.less? - CSS-in-JS - CSS-Modules + export styles in *.css from component library and include them directly in the apps
35. 8IBU
    JG
     we want to make the components library as totally separate project? - publish library as a package in the npm (private or public) - include library in the package.json using GitHub link - make the library sub-module of one of the applications
36. How to make complex component to be reusable
37. %BUB #FIBWJPVS 6* Reusable ???
38. )0$
    (high order components)
39. )0$ changed: context or/and state or/and props
40. )0$
    FYBNQMFT - connect in the react-redux - reduxForm in the redux-form - all API functions in the recompose - Loadable in the react-loadable - and many-many others
41. not only a libraries, but a source of the inspiration
42. #SJOH
    UIF
    QPXFS
    PG
    PUIFS
    QBUUFSOT
    
43. DIJMESFO
    BT
    B
    GVODUJPO
44. react-motion example https://codepen.io/pshrmn/pen/pRroLV?editors=1010
45. DPNQPVOE
    DPNQPOFOUT
46. example https://codepen.io/Kiwka/pen/ZXvVqv?editors=1010
47. +49
    UBH
    BT
    B
    SFGFSFODF
    UP
    DPNQPOFOU
48. 6TFS
    MJTU
    FYBNQMF 6TFS
    MJTU
    JUFN
    FYBNQMF
49. DPNQPOFOUTKTY
50. VTFSMJTUKTY QBHFKTY
51. VTF
    B
    SFOEFS
    QSPQ
52. example https://codepen.io/Kiwka/pen/YrYdyR?editors=1010
53. Nothing except the rocket science is rocket science
54. https://www.youtube.com/watch?v=C_yj4k4QZVI
55. SFBEBCJMJUZ TDBMFBCJMJUZ SFVTBCJMJUZ testability predictability “something”bility performance maintainability
56. Mixins Are Dead. Long Live Composition. Dan Abramov https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order- components-94a0d2f9e750 Enter Higher-Order Components I first learned about this pattern from a gist by Sebastian Markbåge. The gist is a little bit cryptic if you’re not yet fully comfortable with ES6 syntax ”
58. 8IBU
    BCPVU
    PUIFS
    QBUUFSOT
59. Why do we want our components to be reusable
60. 0MFOB
    4PWZO
    @frontendgirl olenasovyn@gmail.com (SB[JF