There's more...

I don't like to use relative paths in the imports, sometimes can be very difficult to calculate the depth of certain files. The babel-plugin-module-resolver package can help us to add a custom alias for our directories. For example:

    // Instead of importing like this     import { isMobile } from '../../../shared/utils/device';    // Using module resolver you can use an alias like:    import { isMobile } from '@utils/device';

As you can see, using an alias is more consistent, and it does not matter in which path you are importing the util always will be the same path using the alias, it's cool, isn't it?

First, we need to install the package:

    npm install babel-plugin-module-resolver

Then in our .babelrc, we can add our aliases for ...

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.