absolute path react post

content/posts/absolute-path-react/index.md

@@ -0,0 +1,52 @@
+---
+title: "How to setup absolute import in react"
+date: 2023-11-11T14:20:00+00:00
+---
+
+React components imports can have a very very long relative file path if you are in a big project, here is how to solve the issue instead of writing a lot of .. .. .. and ..
+Credits to [Eric Murphy](https://www.youtube.com/watch?v=i4MkDjAD49E)
+
+For example you have
+```js
+import React from "react";
+import Button from "../../../components/Button";
+import logo from "../../../../logo.svg";
+
+const NestedComponent = () => {
+    return (
+        <div>
+            <img src={logo} alt="logo" />
+            <Button />
+        </div>
+    );
+};
+
+export default NestedComponent;
+```
+
+Assuming your components folder and logo.svg is in `src` folder
+
+src  
+|--- logo.svg  
+|--- components  
+        |--- Button.js  
+
+You can change your import to
+```js
+import Button from "components/Button";
+import logo from "logo.svg";
+```
+But this ain't gonna work, so we need to create `jsconfig.json` in root directory
+
+```json
+// jsconfig.json
+
+{
+    "compilerOptions": {
+        "baseUrl": "src"
+    },
+    "include": ["src"]
+}
+```
+
+If you are using Typescript, compilerOptions object will already be in tsconfig.json. Then just add `"baseUrl": "src"` to the object