How to Import Components using Absolute Imports in React JS
In react project the components importing is relative by default and this will be a big issue for developers while importing components from nested directories.
Example:
import Cart from '../../carts/cart'
Here there is a component Cart which is placed under src\components\carts\cart.js you can see that the ../../ is not a good practice.
So it’s better to switch to another option which is absolute imports.
Using absolute imports the above import can also be imported as import Cart from 'components/carts/cart'. This kind of approach is very easy to work with and if in near future the directory of Card components changes then it will be easy to modify the existing path just by updating its directory name.
Getting Started
Firstly, you must create a file with the name jsconfig.json. The jsconfig.json is a configuration file for javascript projects.
In jsconfig.json in the root folder of your react project.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Options
- compilerOptions: Here you specify language settings
- baseUrl: Specify the base directory of your project. In React, it is src/ directory.
- include: Specify directories which you would like to have IntelliSense feature to a particular directory. There is also a exclude option that does the opposite of include.
Note
Every time you update jsconfig.json file then always restart your project.
In src/ directory create directory components and within it create an other sub-directory with file /cart/cart.js.
I’ll limit this topic of this post to absolute imports and within component Cart just specify some text( as I’m are testing absolute imports ).
In src\components\carts\cart.js
import React from 'react'
export default function Cart() {
return (
<div>
<h4>This is cart components</h4>
</div>
)
}
Then next is to create a Card component which import Cart component.
In src\components\products\cards\card.js
import React from 'react'
import Cart from 'components/carts/cart'
export default function Card( ) {
return (
<div>
<h4>This is card components</h4>
<Cart />
</div>
)
}
Here we have imported component Cart as import Cart from 'components/carts/cart' which is an absolute way of importing.
To render the output call the component Card within App component.
In src\App.js
import React,{ useState, useEffect } from 'react';
import Card from 'components/products/cards/card';
function App() {
return (
<>
<Card />
</>
)
}
export default App;
output of How to use Absolute imports in React JS
Watch Video
