Tip: Clean Relative Path Imports in React

Photo by Oliver Roos on Unsplash

When you’re developing a React application, is very common to have a src folder with subfolders likecomponents styles etc and having imports like this in your App.js

import Row from './src/components/Row'

import RowStyles from './src/styles/RowStyles'

And this could get ugly very fast with your folder structure, so to convert this into more manageable paths, we can leverage modules, to do this we can go to each of this folders and add a package.json with the name of the module like this:

In src/components/package.json

{"name": "components"}

In src/styles/package.json

{"name": "styles"}

Then we can change our imports everywhere to reference the modules and use it like:

import Row from 'components/Row'

import RowStyles from 'styles/RowStyles'

And that’s a less messy way of handling paths :)