28
loading...
Export Multiple Components in Index File
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.jsSo, 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";There's another scenario like this:
/- components
/- Card
/- Card.js
/- Card.module.cssTo 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: ECMAScript 6 modules: the final syntax.
28