Organize React Components Better with Barrel Exports
Tags: react, javascript, codequality, webdev
Published: 2021-09-28 22:45:13

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

```js
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

```js
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:

```js
// src/components/SidebarSection/index.js

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

export default SidebarSection
```

```js
// 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.

```js
// src/components/Layout/SidebarSection/index.js

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

```js
// src/components/index.js

// This is the Barrel!

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

```js
// 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 on Twitter <a href="https://twitter.come/justmyrealname">@justmyrealname</a> to hear when new articles drop!