TheLazy.Dev
Portfolio GitHub

Blog

react |javascript |codequality |webdev

Organize React Components Better with Barrel Exports

justmyrealname

Joe Ziemba

Posted on September 28, 2021

Organize React Components Better with Barrel Exports

We all know that React imports can get a little... verbose.

import * as React from "react"
import compose from "recompose/compose"
import type Dispatch from "redux"
import connect from "react-redux"
import querystring from "query-string"
import generateMetaInfo from "shared/generate-meta-info"
import Head from "../../components/head"
import SegmentedControl from "../../components/Layout/segmentedControl"
import ChannelProfileCard from "../../components/Layout/entities"
import CommunityAvatar from "../../components/Layout/avatar"
import ErrorBoundary from "../../components/error"
import MembersList from "./components/MembersList"
import PostFeed from "./components/PostsFeed"
import SidebarSection from "../../components/Layout/SidebarSection"
import CommunitySidebar from "../../components/communitySidebar"
import FeedsContainer from "./style"
import InfoContainer from "../community/style"
import FullScreenRedirectView from "../../views/viewHelpers/fullScreenRedirect"
// and this isn't even that long...
Enter fullscreen mode Exit fullscreen mode

The node module imports are unavoidable, but we can clean up our local imports
with a pattern called barrel exporting.

The Barrel Export 

import {
  ChannelProfileCard,
  CommunityAvatar,
  CommunitySidebar,
  ErrorBoundary,
  FeedsContainer,
  FullScreenRedirectView,
  Head,
  InfoContainer,
  MembersList,
  PostFeed,
  SegmentedControl,
  SidebarSection,
} from "../../components"
Enter fullscreen mode Exit fullscreen mode

A lot easier on the eyes, eh?

Barrel is about more than the aesthetic though. We get better Intellisense and auto-importing for components in editors like VSCode thanks to the named exports, along with more flexibility in organizing our filesystem. We can nest folders as deep as it makes sense without worrying about ballooning import statements.

How to set up Barrel Exports

A traditional export/import setup for React looks like this:

// src/components/SidebarSection/index.js

const SidebarSection = (props) => {
  /* implementation */
}

export default SidebarSection
Enter fullscreen mode Exit fullscreen mode 
// src/views/Homepage/index.js

import Error from "../../components/error"
import Row from "../../components/Layout/blocks/Row"
import SidebarSection from "../../components/Layout/SidebarSection"
Enter fullscreen mode Exit fullscreen mode

To enable the Barrel pattern, all we need to do 2 things:

  1. Change from a default to named exports.
  2. Add an index.js in whatever directory you want to be "the Barrel." From this file, we'll re-export all our components in that branch of the filesystem. 
// src/components/Layout/SidebarSection/index.js

export const SidebarSection = (props) => {
  /* implementation */
}
Enter fullscreen mode Exit fullscreen mode 
// src/components/index.js

// This is the Barrel!

export { Error } from "./Error"
export { Row } from "./Layout/blocks/Row"
export { SidebarSection } from "./Layout/SidebarSection"
Enter fullscreen mode Exit fullscreen mode 
// src/views/Homepage/index.js

import { Error, Row, SidebarSection } from "../../components"
Enter fullscreen mode Exit fullscreen mode

And that's it!

What's Next

In future posts we'll look at even more improvements we can make to our React code with patterns like dot notation and removing the need to relative imports. Follow me on Twitter @justmyrealname to hear when new articles drop!

💖 💪 🙅 🚩
justmyrealname
Joe Ziemba

Posted on September 28, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Organize React Components Better with Barrel Exports
react Organize React Components Better with Barrel Exports

September 28, 2021