How to use absolute path in ReactJs

Absolute Path vs Relative Path?
Absolute Path is when you source for a folder or file from the root either where your system storage start from or where the project start from.

Relative Path is when you try to source for a file or folder taken into co…


This content originally appeared on DEV Community and was authored by Emmanuel Ifeanyi MECHIE

Absolute Path vs Relative Path?
Absolute Path is when you source for a folder or file from the root either where your system storage start from or where the project start from.
Absolute Path
Relative Path is when you try to source for a file or folder taken into consideration where you are currently located in the project structure.
Relative Path

Steps to configure your React project with absolute path.

  1. Create React App
  2. Add jsconfig.json
  3. Import file with absolute path

Create React App

if you already have react app to configure you can skip this step

npx create-react-app app_name

App.js

import Button from "./components/button";

const App = () => {
  return (
    <div>
      <Button />
      <Card></Card>
    </div>
  );
};

export default App;

Add jsconfig.json

in your project add jsconfig.json beside package.json
Project Structure

jsconfig.js

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "exclude": ["node_modules", "build"],
  "include": ["src"]
}

for typescript create tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Import with absolute path 

import Button from "components/button";

const App = () => {
  return (
    <div>
      <Button />
      <Card></Card>
    </div>
  );
};

export default App;


This content originally appeared on DEV Community and was authored by Emmanuel Ifeanyi MECHIE


Print Share Comment Cite Upload Translate Updates
APA

Emmanuel Ifeanyi MECHIE | Sciencx (2021-10-17T14:15:33+00:00) How to use absolute path in ReactJs. Retrieved from https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/

MLA
" » How to use absolute path in ReactJs." Emmanuel Ifeanyi MECHIE | Sciencx - Sunday October 17, 2021, https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/
HARVARD
Emmanuel Ifeanyi MECHIE | Sciencx Sunday October 17, 2021 » How to use absolute path in ReactJs., viewed ,<https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/>
VANCOUVER
Emmanuel Ifeanyi MECHIE | Sciencx - » How to use absolute path in ReactJs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/
CHICAGO
" » How to use absolute path in ReactJs." Emmanuel Ifeanyi MECHIE | Sciencx - Accessed . https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/
IEEE
" » How to use absolute path in ReactJs." Emmanuel Ifeanyi MECHIE | Sciencx [Online]. Available: https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/. [Accessed: ]
rf:citation
» How to use absolute path in ReactJs | Emmanuel Ifeanyi MECHIE | Sciencx | https://www.scien.cx/2021/10/17/how-to-use-absolute-path-in-reactjs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts