No more ./../ import in React

Rubenshibu
Aug 25, 2021

no more ../../ import in React

Hello, World!

Are you guys importing React Components like ‘ ../../../ ’ this ?

A React Component
relative import

Other than this you should update to Absolute imports

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”]
}

lets convert the relative imports of above given code to Absolute import

import React from 'react';
import Button from 'Button';
class DangerButton extends ...
...
}

Benefits of Absolute imports

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

eat sleep code ❤

export default Button;

--

--