DEV Community: Joe Ziemba

Organize React Components Better with Barrel Exports

Joe Ziemba — Tue, 28 Sep 2021 22:45:13 +0000

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

JavaScript from ES6 to Today

Joe Ziemba — Mon, 20 Sep 2021 22:04:16 +0000

ES6 is nearly synonymous with "modern javascript" and rightly so. When it dropped in 2015 as the second-ever major language update (first being ES5 in 2009) ES6 added a huge list of features that completely changed JS development. But time didn't stop in 2015 and the good folks over at ECMA International have released a new version every year since - that's right, in 2021 we're actually on ES12!

If you missed the memo on versions 7-11, you're not alone. Thanks to tools like Babel, Webpack and TypeScript that transpile our code to browser-usable versions, we don't really need to pay much attention to the ES versions. But you might be surprised how many language features are newer - or older - than you thought...

ES6 / ECMAScript 2015

Variables

let
const
Block-scoping
Array destructuring let [ a, b ] = sourceArray
Object destructuring let { a, b } = sourceObject

Object Literals

Property shorthand let obj = { a, b }
Computed property keys let obj = { [a]: "a" }
Method definition let obj = { myMethod(a) { return a } }; obj.myMethod("a");
for...of loops

Arrays

Spread operator [a, b, ...anotherArray]
.copyWithin()
.entries()
.fill()
.find()
.findIndex()
.keys()
.values()

Functions

Arrow declaration () => {}
Default params (a, b = true) => {}
Rest params (a, b, ...rest) => {}
Destructuring params ({ a, b }) => {}
Generators

Classes

class
get
set
static
extends
instanceof

Modules

import
export
default

Regular Expressions

/y (sticky)
/u (unicode)
.flags
.source

Strings

Template literals
.includes()
.startsWith()
.endsWith()
.repeat()

New Global Objects / Methods

Map
Set
WeakMap
Promise
Symbol
RegExp
Object
- .assign()
- .entries()
Array
- .from()
- .of()
Number
- .EPSILON
- .MIN_SAFE_INTEGER
- .MAX_SAFE_INTEGER
- .isInteger()
- .isSafeInteger()
- .isFinite()
- .parseFloat()
- .parseInt()
- .isNaN()
Math
- .cbrt()
- .log10()
- .log2()
- .sign()
- .trunc()
- .hypot()

That's everything released in ES6. It's a lot. But if you feel like something's missing from the list, keep going. There's 6 more years of features to go!

Fun fact: ES6 is now fully supported by browsers, so it no longer needs to be transpiled unless you're unfortunate enough to be supporting Internet Explorer (my condolences)

ES7 / ECMAScript 2016

Exponentiation 3 ** 4
Array.includes()

ES8 / ECMAScript 2017

Asyncronous functions async/await
Object destructuring rest assignment let { a, b, ...c } = sourceObject
Object spread properties { a: 'a', b: 'b', ...anotherObject }
Object
- .entries()
- .getOwnPropertyDescriptors()
- .values()
String prototypes
- .padStart()
- .padEnd()
Trailing commas in function parameters
Shared memory and atomics

ES9 / ECMAScript 2018

Async iteration for-await-of
Rest and Spread for Object Literals
Promise.prototype.finally()
Tagged Template Literals
Regular Expressions
- named capture groups
- better escapes
- lookbehind assertions

ES10 / ECMAScript 2019

Optional catch binding
Symbol.prototype.description
Object.fromEntries()
String methods .trimStart() and .trimEnd()
Array methods .flatMap() and .flat()

ES11 / ECMAScript 2020

Bigint data type
Optional chaining on objects myObject?.details?.name
Nullish coalescing operator a ?? b
String.prototype.matchAll()
Dynamic imports via import()
Promise.allSettled()
globalThis
import.meta
Namespace re-exporting: export \* as ns from "mod"

ES12 / ECMAScript 2021

String.prototype.replaceAll()
Promise.any()
WeakRefs
Logical assignment operators
Underscores as separators in number and bigint

What's next for JS?

JavaScript's yearly release pace doesn't look to be slowing down anytime soon. ES13 is already in the works, slated for release in 2022 with a still-growing list of new additions like .at() for arrays, Object.hasOwn(). If you want to stay ahead of the curve, you can follow the progress of proposals for language additions here on GitHub. There are some that will come out next year, but many more to keep an eye on for later versions (personally, I'm hoping for the pipe operator soon).

But until then, sound off in the comments with the JS features you were surprised are older or newer than you though or that you'd never even heard of before! Unless you work with ECMA International, I'm willing to bet there's a few 😄.