This content originally appeared on DEV Community and was authored by Joe Ziemba
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:
- Change from a default to named exports.
- Add an
index.jsin 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 on Twitter @justmyrealname to hear when new articles drop!
This content originally appeared on DEV Community and was authored by Joe Ziemba
Joe Ziemba | Sciencx (2021-09-28T22:45:13+00:00) Organize React Components Better with Barrel Exports. Retrieved from https://www.scien.cx/2021/09/28/organize-react-components-better-with-barrel-exports/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.