React Native’de Absolute Path Kullanımı
Absolute path kullanımı sayesinde dosyaları import ederken kaç alt klasörde yada kaç üst klasörde olduğunu düşünmeden dahil edebilmek kod yazarken hem zaman kazandırıyor hemde bu sıkıcı olacak işlemden bizi kolayca kurtarıyor.
Projemize jsconfig.json dosyasını ekleyerek başlayalım. Bu dosya oluşturulduğu dizinin vscode editöründe projenin kök dizini olduğunu belirtir. İçeriği aşağıdaki gibidir.
// dosya: jsconfig.json{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["./Src/*"]
}
}
}
baseUrl ile projenin kök dizini referans veriyoruz.
paths kısmına ise Src’nin altındaki dizinleri eklerken bu path’i baz almasını söylüyoruz. “*” ise Src’nin altında herhangi bir dizin adı gelebilir anlamı taşıyor. jsconfig dosyasında bulunan işleri hallettikten sonra sıra dizin yapısına geliyor.
Dizin yapımızın alt kısımdaki gibi olduğunu varsayalım.
- reactNativeProject
jsconfig.json
- __test__
- android
- ios
- Src
- Components
package.json
- Button
index.js
styles.js
- Screens
package.json
- Login
index.js
styles.js
- Home
index.js
styles.js
- Navigators
package.json
- AppNavigator
index.js..............
Src dizini altında bulunan doğrudan erişmek istediğimiz dizinlere package.json ekliyoruz. Components, Screens ve Navigators’a direk erişmek istediğim için ekledim.
package.json içerikleri alt kısımdaki gibi olacak. İsim kısmına hangi dizinde ise o yazılacaktır. Yoksa eklediğiniz dizine erişim sağlayamazsınız.
- Components//package.json
{
"name": "Components"
}- Screens//package.json{
"name": "Screens"
}- Navigators//package.json{
"name": "Navigators"
}
Aşağıdaki durumlarda Button component’ine ulaşmak isteseydik.
- absolute path olmasaydı Login ekranından
import Button from “../../Components/Button”;- absolute path olduğunda Login ekranında yada Src altında bulunan her dizinde
import Button from “Components/Button”;Absolute path sayesinde Src altında bulunan her dizinden aşağıda görüldüğü gibi erişim sağlayabileceğiz.
import Home from “Screens/Home”;
import Login from “Screens/Login”;
import Button from “Components/Button”;
import AppNavigator from “Navigators/AppNavigator”;Sonuç olarak hem zaman tasarrufu yapıp hem de temiz kod yazmış olacağız.
İyi kodlamalar!
Twitter Hesabım
React Native yada diğer sorularınız için
jsconfig.json ile ilgili daha detaylı bilgi için
Vscode
