No More ../../../ Import in React
Tags: react, javascript, webdev, beginners
Published: 2021-08-15 12:32:56

 Steps to configure absolute Import in Create React App without any third-party packages.

Are you importing components like `../../../../somecomponents`? Then you should update to Absolute imports. 

## Benefits of Absolute Import

1. You can move your existing code to other components with imports without any changes.
2. You can easily identify that where the component is actually placed using the import path.
3. Cleaner Code.
4. Easier to write.

## Configure Absolute Import

To support absolute import create a file named `jsconfig.json` in your root directory and add the below code.
```
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

Now let's convert the relative imports in the below component to Absolute Import
```
import React from 'react';
import Button from '../../components/Button';
import { red } from '../../utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;
```

The Above imports will be changed to as below
```
import React from 'react';
import Button from 'components/Button';
import { red } from 'utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;
```

Now our imports are clean and understandable. 


## Configuring in JET Brains IDEs

* For JET Brains IDEs like WebStorm, PhpStorm, RubyMine and etc, we need to add some additional configurations as below to support Absolute import

`Right-click` the `src` folder and select `Mark Directory as` and Click `Resource Root`.

![Resource Root](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8jz2ny1wh1jyz82zlad.png)

* Next select **Preferences** -> **Editor** -> **Code Style** -> **JavaScript** -> **Imports** and Check **Use paths relative to the project, resource or source roots** and Click **Apply**.

![ide-resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7mt34x1vw6yz0q7t1nl.png) 

## VS Code

No Changes need to be done in VS Code. It will automatically import the config from `jsconfig.json` file.

## Resources

1. [VS Code jsconfig.json](https://code.visualstudio.com/docs/languages/jsconfig)
2. [JET Brains CodeStyle](https://www.jetbrains.com/help/idea/settings-code-style-javascript.html#ws_js_settings_editor_code_style_imports_tab)

## Conclusion

Absolute imports make the component more readable and clean. I hope you have found this useful. Thank you for reading.

Get more updates on [Twitter](https://twitter.com/Nilanth).

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**

## eBook

[Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples](https://nilanth.gumroad.com/l/ztehh)

[ReactJS Optimization Techniques and Development Resources](https://nilanth.gumroad.com/l/NYkdN)

## More Blogs
1. [Laravel Sanctum Authentication for React App Using Breeze
](https://dev.to/nilanth/laravel-sanctum-authentication-for-react-app-using-breeze-2l5f)
2. [Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS](https://dev.to/nilanth/twitter-followers-tracker-using-nextjs-nextauth-and-tailwindcss-1em7)
3. [Don't Optimize Your React App, Use Preact Instead
](https://dev.to/nilanth/dont-optimize-your-react-app-use-preact-instead-30og)
4. [Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support](https://dev.to/nilanth/build-a-portfolio-using-next-js-tailwind-and-vercel-4dd8)
5. [10 React Packages with 1K UI Components
](https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3)
6. [Redux Toolkit - The Standard Way to Write Redux](https://dev.to/nilanth/redux-toolkit-the-standard-way-to-write-redux-2g32)
7. [5 Packages to Optimize and Speed Up Your React App During Development](https://dev.to/nilanth/5-packages-to-optimize-and-speed-up-your-react-app-during-development-4h5f)
8. [How To Use Axios in an Optimized and Scalable Way With React](https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n)
9. [15 Custom Hooks to Make your React Component Lightweight](https://dev.to/nilanth/15-custom-hooks-to-make-your-react-component-lightweight-17cd)
10. [10 Ways to Host Your React App For Free](https://dev.to/nilanth/10-ways-to-host-your-react-app-for-free-27ga)
11. [How to Secure JWT in a Single-Page Application](https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko)