I use create-react-app

Often, for example, a button is required. And it is imported, based on the current folder:

import Button from "../../../common/Button/Button"

How to make a more accurate import? Can it always be an absolute path relative to src? Please share your experience

  • so that's okay - Sasuke
  • In general, probably, yes. But I would like to make it more convenient - stiv
  • What is more convenient in your understanding? - Stepan Kasyanenko
  • one
    You can try to navigate from the root folder - Quick moose
  • @StepanKasyanenko for example the absolute path would be a good solution? or just share the experience as you normally do - stiv

2 answers 2

The choice of the import path depends on the imported entity.

Suppose we have a component and a style file for it. If this style file is not used anywhere else and is located next to the component, then it is convenient and logical to use a relative path.

import Button from "./button.css"

Suppose we have a component and there is a common component. This shared component can be located in a shared folder and used in many other components. Then it is more logical to use the absolute path.

import Button from "src/shared/button"

  • I agree, this is exactly what is needed: so that the component style file is imported along a relative path. And the common components are absolute. Advise how you can do this? - stiv
  • @stiv How to do it - depends on your IDE. For example, for each project I use a set of hot keys that inserts an absolute path for the common folder of components \ libraries. And the default import is relative. - Stepan Kasyanenko
  • I use phpstorm, I would like to see a specific example - stiv
  • @stiv specific example of what you want? - Stepan Kasyanenko

Regarding the project root

 import 'foo' from '~/components/foo.js';