Named Imports/Exports for React Components

Posted on



Why named imports/exports?

  • Easier to find references to components
  • Autocomplete
  • Prevents typos



What does a named import look like?

import { Counter } from './Counter';
Enter fullscreen mode

Exit fullscreen mode



What does a default import look like?

import Counter from './Counter';
Enter fullscreen mode

Exit fullscreen mode



How to export a connected component?

export const _Counter () => {
   ...
}

export const Counter = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
)(_Counter);
Enter fullscreen mode

Exit fullscreen mode

Leave a Reply

Your email address will not be published.