Tip - Better imports using Barrels in JS/TS

javascript
Back

Example

Let's say you have 3 components in your /components directory

// components/Header.jsx
export const Header = () => {};
// components/Footer.jsx
export const Footer = () => {};
// components/NavBar.jsx
export const NavBar = () => {};

Create components/index.jsx which export all components

// components/index.jsx
export * from "./Header";
export * from "./Footer";
export * from "./NavBar";

Then import them like

// App.jsx
// Instead of this -
import { Header } from "../components/Header";
import { Footer } from "../components/Footer";
import { NavBar } from "../components/NavBar";
// Use this
import { Header, Footer, NavBar } from "../components";

Thanks.

MIT © Mohan Dere.
-