This content originally appeared on DEV Community and was authored by Suhail Kakar
Introduction ?
When you go to GitHub and see some other developers code, most of them are importing their components like this?
import Button from "../../../components/Buttons/Button"
This is called relative import. Relative import will start with either ./,/ or ../.
I am not telling that this is the wrong way and even there is no issue if you import like that, but if you have a very big and complex project, relative imports will look a lot messy similar to this.
import Button from "../../../../../../components/Buttons/Button"
However, there is a very better and cleaner way to import these components. This method is called absolute import. An absolute import will look this like ?
import Button from "components/Buttons/Button"
Adding absolute imports to React Apps (CRA) ?
Open your project in any code editor and create a new file in your project's root directory named jsconfig.json. Once you created the file paste the below JSON inside of it.
{
"compilerOptions": {
"baseUrl": "src"
}
}
This will instruct Webpack to use the src directory as a base one.
Conclusion ⌛
I hope you found this short article helpful. If you need any help please let me know in the comment section.
Let's connect on Twitter and LinkedIn
? Thanks for reading, See you next time
This content originally appeared on DEV Community and was authored by Suhail Kakar
Suhail Kakar | Sciencx (2021-08-16T04:50:21+00:00) Stop Using ../../../ While Importing Components, Instead Use This Method. Retrieved from https://www.scien.cx/2021/08/16/stop-using-while-importing-components-instead-use-this-method/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.