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

On the way to making React components more reusable

On the way to making React components more reusable

Olena Sovyn

October 06, 2017

More Decks by Olena Sovyn

Other Decks in Programming


  1. 8IZTUPSZCPPLBQQSPBDI - 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
  2. (PPEUIJOHTUPSFNFNCFS - 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.)
  3. &YQPTVSFXIBUQSPQT TIPVMECFQBTTFE - 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
  4. 8IBUJG 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
  5. 8IBUJG 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
  6. )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
  7. 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 ”