Menghindari import bersarang

Mengimpor file akan menjadi sangat menyakitkan ketika basis kode Anda tumbuh dan menghasilkan file bersarang.
Perhatikan struktur direktori berikut:

app/
   components/
     Alert.js
     Button.js
   screens/
     Home.js
     About.js

Dengan struktur direktori tersebut, katakanlah Anda ingin mengimpor komponen Button atau Alert, misal: import Button from ../../components/Button, ketika lokasi file berubah kita perlu memperbarui pathnya, kalau tidak tentu pasti akan menghasilkan error.

Menggunakan absolute import

Ada solusi untuk mengatasi ini, yaitu dengan menggunakan absolute import. Selain dapat menghindari error saat lokasi file berubah, penggunaan absolute import juga akan membuat kode menjadi lebih bersih dan tidak rumit.

Pertama, dengan mengkonfigurasi file jsconfig.json di root proyek

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

Disini Anda perlu mengatur baseUrl ke direktori root yang diperlukan sebagai basis impor sehingga Anda dapat mengimpor komponen dengan jalur absolut. Sekarang, ketika ingin mengimpor komponen cukup dengan cara: import Button from components/Button.

Kedua, menambah file package.json ke direktori komponen

app/
   components/
     Alert.js
     Button.js
     packages.json
   screens/
     Home.js
     About.js

Anda dapat memanfaatkan package.json dengan menambah property name yang nantinya ini akan digunakan sebagai home directory saat import komponen

{
   "name": "components"
}

Sekarang, ketika ingin mengimpor komponen cukup dengan cara: import Button from components/Button.

Kesimpulan

Dengan memanfaatkan absolute import selain dapat menghindari error saat lokasi file berubah, juga akan membuat kode menjadi lebih bersih. Karena ketika lokasi file berubah Anda tidak perlu memperbarui pathnya, dan saat anda melakukan import file anda tidak perlu mengetahui hirarki file berbeda jika Anda menggunakan relative path.

Reference: https://create-react-app.dev/docs/importing-a-component#absolute-imports