An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- BoingBoing
- Mashable
- Techcrunch
- Team Treehouse
- Spoon Graphics
- Smashing Magazine
- Vandelay Design
- Crazy Leaf Design
- Android Dissected
- The Verge
Help Webnuz
Referal links:
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...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.jsconst SidebarSection = (props) => { /* implementation */}export default SidebarSection// src/views/Homepage/index.jsimport 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.jsexport 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.jsimport { 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!
Original Link: https://dev.to/justmyrealname/organize-react-components-better-with-barrel-exports-4fno
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To