I have a React project with a structure like this:
- src
- Components
- My_component_1
- My_component_2
- Images
- image_1
- image_2
- Pages
- page_1
- page_2
- Components
I'd like to know if exists a way to register a folder as a component (e.g @Images or @Components for all images or components). In this way, if I'm working on sub-component of page 1, I will not need to write:
import component from "../../Components/My_component_1
but
import {My_component_1} from '@Components'
and avoid to manage relative url and different URLs in different components.
CodePudding user response:
I think you want to configure path aliases or shortcuts in your project. You can read more about it here: How to make an import shortcut/alias in create-react-app?.
There also a few posts online how to do that, for example on the medium.com or dev.to website.
CodePudding user response:
You can configure your jsconfig.json like this:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
and then you will be able to import component like this:
import Button from 'components/Button';
Copied from https://create-react-app.dev/docs/importing-a-component/