React Clean Code with Absolute Imports

React is a popular JavaScript library used for building user interfaces. When working with React, you may find yourself importing multiple modules from various files within your project. One way to organize your imports is by using absolute imports. In this article, we will explore the benefits of using absolute imports in React with JavaScript or TypeScript.

What are absolute imports?

In JavaScript, when you import a module, you specify the path to the file that contains the module you want to import. The path can be a relative path or an absolute path. A relative path starts with one or more dots followed by a forward slash.

Lets take a simple todo application with following folder structure:

src/
  components/
    TodoList.tsx
    TodoItem.tsx
  screens/
    TodoScreen.tsx

To import the TodoList component in the TodoScreen, you can import like:

import TodoList from '../../components/TodoList';

This statement uses a relative path to import the TodoList module from the components directory. Using relative paths can be error-prone, especially when you have a large project with many nested directories.

To avoid these issues, you can use absolute paths to import modules. An absolute path starts at the root of your project and specifies the path to the module you want to import. Here's an example:

import TodoList from 'components/TodoList';

This statement uses an absolute path to import the TodoList module from the src/components directory. Using absolute paths can help you avoid errors and make your code more maintainable.

How to use absolute imports with TypeScript

If you're using TypeScript with React, you can use the baseUrl and paths options in your tsconfig.json file to configure absolute imports. Here's an example:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

How to use absolute imports with Javascript

If you're using TypeScript with React, add a jsconfig.json file in the root of your project with the following content:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

This configuration sets the baseUrl to the root of your project and defines a path mapping for src/*. This means that you can use absolute imports for files in the src directory.

Benefits of using absolute imports in React.

1. Simplified imports

One of the main benefits of using absolute imports in React is that it simplifies your imports. Instead of using complex relative paths to import modules, you can use short and simple absolute paths. This can make your code easier to read and maintain.

For example, consider the following import statement using a relative path:

import MyComponent from '../../../components/MyComponent';

This statement uses a long and complex relative path to import the MyComponent module. By contrast, using an absolute path, the import statement becomes:

import MyComponent from 'src/components/MyComponent';

This statement uses a short and simple absolute path to import the MyComponent module.

2. Avoids file path errors

When working with relative paths, it's easy to make mistakes and import the wrong file. Absolute paths avoid this issue by specifying the exact location of the file you want to import. This means you can avoid common errors such as importing the wrong file or missing files.

3. Makes refactoring easier

Using absolute imports can make refactoring your code easier. When you move files or directories around in your project, you can simply update your import statements with the new absolute path. This can save you time and reduce the risk of introducing errors into your code

Comments

[Marat Latypov]

Great article!
I think you have a small misstype at the section How to use absolute imports with Javascript
I think it should be

If you're using Javascript with React,

instead of

If you're using TypeScript with React,

[Tasawar Hussain]

The title has React mention in it, so repeating React couple of times more didn't sound good to me

[Muaaz Bin Sarfraz]

God damn !! thanks man , Gonna implement this in my code base from today

[ADS-BNE]

EDIT This wasn't working for me because I was doing it on .jsx files. I found using the tsconfig.json example code on the jsconfig.json instead (or just convert to .js files).

Bit confused about this. I've followed exactly what you've done but it didn't work for me. Just says 'Module not found'.

I created the jsconfig.json file in the root of my project, alongside index.js and pasted in what you have above. I then tested by replacing one of my component includes, eg:

From import Textinput from "../../components/atoms/textInput/textInput"; to import Textinput from "src/components/atoms/textInput/textInput";.

But yeah - now it can't seem to find it.