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...

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"

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

// src/views/Homepage/index.js

import Error from "../../components/error"
import Row from "../../components/Layout/blocks/Row"
import SidebarSection from "../../components/Layout/SidebarSection"

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 */
}

// src/components/index.js

// This is the Barrel!

export { Error } from "./Error"
export { Row } from "./Layout/blocks/Row"
export { SidebarSection } from "./Layout/SidebarSection"

// src/views/Homepage/index.js

import { Error, Row, SidebarSection } from "../../components"

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 here on Hashnode and on Twitter @justmyrealname to hear when new articles drop!