DEV Community

Elson Jose
Elson Jose

Posted on

How to simplify importing multiple components in another component ?

Suppose we have multiple components namely Component1, Component2 and Component3. Importing them in the main Component (usually the App Component) will look like this.

import Component1 from './path-to-component1'
import Component2 from './path-to-component2'
import Component3 from './path-to-component3'

This is repetitive. This can be solved by creating a new js file inside the components directory & exporting the components inside it.

export { default as Component1 } from './path-to-component1'
export { default as Component2 } from './path-to-component2'
export { default as Component3 } from './path-to-component3'

Now inside the main Component (usually the App Component) we can import them using the below one-liner.

import { Component1, Component2, Component3 } from './path-of-the-js-file-containing-export-statements'

Top comments (0)