Dot dot slash is gone

We all do this when we are importing components in React...

import { BlueButton } from "../../../components/buttons";

If you like typing dots then that fine, carry on. But if you don't like typing dots - read on.

Lets install a package to allow us to do away with these dots once and for all.

npm install babel-plugin-module-resolver -D

OR

yarn add babel-plugin-module-resolver -D

This plugin is going to convert your long relative import paths to aliases.

Add the plugin to your .babelrc file.

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@buttons": "./src/components/buttons"
        }
      }
    ]
  ],
  ...
}

Now you can import your component like this instead

// new way to import
import { BlueButton } from "@buttons";
import DangerButton from "@buttons/DangerButton";

No more dots ;-)