Chen Yang

Export Multiple Components in Index File

Export Multiple Components

When I structure a React app, I'd like to put the components which are in the same category but with different styles in the same folder. Something like this:

/- components
	/- Card
		/- CardLeftMedia.js
		/- CardRightMedia.js
		/- CardTopMedia.js

So, I need to import & export them in a index.js file. Here's the simple solution:

// components/Card/index.js

export { default as CardLeftMedia } from './CardLeftMedia';
export { default as CardRightMedia } from './CardRightMedia';
export { default as CardTopMedia } from './CardTopMedia';

They're named exports, and I import them with curly braces:

// pages/Home.js

import { CardLeftMedia } from '../components/Card';

Export One Component as Default

There's another scenario like this:

/- components
	/- Card
		/- Card.js
		/- Card.module.css

To export Card.js, I also add an index file:

// components/Card/index.js

export { default } import "./Card";

It's a default export and I could import it directly:

// pages/Home.js

import Card from '../components/Card';

More information about ES6 modules: