React Native — Import with Absolute Path

Import dengan Relative Path

Ingin baca tutorial ini dalam Bahasa Inggris?

Mengerjakan proyek aplikasi dengan bahasa pemrograman yang memerlukan action Import secara manual kadang membuat rumit dan error dalam memanggil class atau function yang telah dibuat untuk dipanggil saat membutuhkannya.

Contoh gambar diatas adalah penggunaan Import dengan Relative Path. Kamu sudah tau bedanya Relative Path dengan Absolute Path? Kalau belum, yuk simak. Kita pelajari bersama.

Perbedaan

Relative Path adalah kondisi kita memanggil sebuah file tetapi mengikuti kondisi kita sekarang berada pada di file mana untuk melakukan Import. Contoh kita sedang berada di dalam folder src sedangkan kita ingin memanggil file diluar folder src. Maka kita perlu memanggilnya “../namafile.js”. Tanda ../ menandakan kita akan kembali ke direktori sebelumnya, baru memanggil filenya. Jadi Relative Path sangat tergantung pada struktur folder yang kita buat.

Absolute Path adalah kondisi kita memanggil sebuah file tetapi selalu memanggilnya dari home directory. Misalkan seperti contoh diatas, kita akan memanggil file didalam folder src maka kita tinggal panggil dari home directory “home/namafile.js”. Jadi tidak tergantung dari struktur folder dan sangat memudahkan jika memindahkan file yang sudah terjadi pemanggilan import didalamnya, sehingga tidak perlu mengubah path file lagi. Berbeda dengan Relative Path, yang perlu mengubah path file saat lokasi file-nya dipindahkan.

Pada React Native, kita bisa menggunakan Absolute Path. Awalnya saya masih menggunakan Relative Path. Semenjak menemukan kekurangan dan kerumitan untuk mengelola proyek yang skalanya cukup besar. Saya coba telusuri bagaimana mengatasi masalah import path file. Ternyata solusinya adalah Absolute Path.

Studi Kasus

Jika kita menggunakan Relative Path pada React Native, kita bisa langsung memanggil file tanpa melakukan konfigurasi apapun. Jadi bisa dilakukan seperti biasa pada umumnya.

Tetapi untuk Absolute Path, saya menemukan cara implementasi dengan memanfaatkan package.json. Mari kita coba.

Pada file package.json pada bagian property name, kita dapat mengganti sesuai keinginan

{
  "name": "app",
  ...
}

Sehingga property name itu akan menjadi home directory yang akan kita gunakan. Misalkan kita memiliki struktur folder seperti ini

android
src
---components
------Button.js
---screens
------Login.js
ios
node_modules
package.json
index.js
App.js

Pada file src/screens/Login.js kita ingin melakukan Import file src/components/Button.js maka jika kita melakukan menggunakan Relative Path, akan seperti ini

Import Button from '../components/Button.js';

Tetapi jika kita menggunakan Absolute Path

Import Button from 'app/src/components/Button.js';

Kelebihan dan kekurangan sudah saya jelaskan pada bagian Perbedaan. Jelas lebih baik pakai Absolute Path.

Referensi:

• https://github.com/facebook/react-native/issues/3099#issuecomment-221815006
• https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

Sekian terima kasih. Semoga bisa bermanfaat. :)

Yuk tulis ide topik atau request topik yang sedang kamu pelajari seputar React Native. Tuangkan ide atau request kamu disini http://bit.ly/RequestTopicReactNative