Usare path assoluti in React

Supponiamo di avere parecchi componenti/moduli in una nostra app React.

Quando li includiamo abbiamo sempre quei path relativi con N puntini davanti a seconda del livello in cui ci troviamo.

In realtà possiamo usare i path assoluti; ma cominciamo da un esempio standard.

Abbiamo una cartella components con dentro un nostro componente:

import React from 'react';

function MyComp() {
  return <h1>CIAO!</h1>;
}

export default MyComp;

Lo richiamiamo così:

import React from 'react';
import MyComp from "./components/MyComp";

function App() {
  return (
      <>
        <MyComp/>
      </>
  );
}

export default App;

Come vedete il path è relativo.

Facciamo una modifica nel tsconfig.ts:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src", // AGGIUNTA
    "paths": { // AGGIUNTA
      "components": [
        "components/*"
      ]
    }
  },
  "include": [
    "src"
  ]
}

Vi ho segnato le aggiunte.

Adesso modifichiamo il richiamo al nostro componente:

import React from 'react';
import MyComp from "components/MyComp";

function App() {
  return (
      <>
        <MyComp/>
      </>
  );
}

export default App;

In paths potete aggiungerne quanti ne volete; qui abbiamo fatto un esempio con i componenti, ma la stessa cosa vale per librerie, funzioni, ecc.

Enjoy!