DEV Community

Raúl Sánchez
Raúl Sánchez

Posted on

Named Imports/Exports for React Components

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

Discussion (0)