Absolute imports in React allow you to import components with ease without worrying about where the directory of the component is relative to the one you’re importing to. Say we have componentA located in
src/components/navbar/componentA.js/ and componentB in
src/componentB.js. In code that looks like this:
To import our componentB into componentA it would look like this with an absolute import
import "componentB" from "src/componentB"
With a relative import it looks like this
import "componentB" from "../../componentB"
That can get real annoying real fast.
To set this up you can do it with one of two ways. If you’re using Create React App 3.0 or higher, use this way:
create a new file in the same directory as your package.json called jsconfig.json. Inside the following code in the file
If you aren’t using Create React App 3.0 do it this way:
create a file in the same directory as your package.json and name it .env. Inside of the file put the following code
Once you restart your app you should be able to start using absolute imports!!