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;

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Rubenshibu
Rubenshibu

Written by Rubenshibu

Student, OpenSource enthusiast

No responses yet

Write a response