“Localhost üzerinde React veya benzer bir araç ile web uygulaması geliştirirken componentleri görüyorum ama proje dosyası içerisindeki kodlarını bulmakta zorluk çekiyorum.” diyor isen bu içeriği tamda sana hazırlamış oluyorum yazılımcı kafalar.

Projelerimiz büyükçe oluşturduğumuz componentleri kodların içerisinde bulmak iyice zorlaşıyor. LocatorJs tarayıcı eklentisi bize bu konuda yardımcı olmakta. Nasıl mı? Hemen göstereyim.

Önce LocatorJs Eklentisini İndirin.

İlk önce kullandığımız tarayıcı için eklentiyi indirmemiz gerekiyor. Buraya tıklayarak eklentiyi eklentiyi kurabilirsiniz.

Projenizi çalıştırın.

Eklentiyi kurduktan sonra projenizi bir kod editöründe veya Ide de çalıştırın. Önerim vscode kullanmanızdır.

Böyle bir uyarı veriyor ne yapacağım?

Bu uyarı sizi bilgilendirmek içindir. Sadece eklentiyi kurmanız yeterli değil. Aynı zamanda proje içerisine de bazı eklemeler yapmanız gerekiyor.

Ben bir react projesi buldum. Buraya tıklayarak sizde aynı projeyi indirip benimle birlikte ilerleyebilirsiniz.

Uyarımızda bizlere kullandığımız javascript kütüphanesine göre projemize bir paket eklememiz gerektiğini söylüyor. Benim örnek olarak kullandığım react projesine göre gider ise bizi bir web sayfasına yönlendiriyor . Web sayfasına gitmek için buraya tıklayabilirsiniz veya yukarıdaki resimde react yazan yere tıklayabilirsiniz.

Bu sayfada çok basit bir dilde yapmamız gerekenler anlatılmış. Ben küçük bir özet geçeceğim.

Kurulum yapıyoruz.

Aşağıdaki kodu kullanarak projenize paketi kurunuz.

npm install -D @locator/babel-jsx

Ardından proje ana dizininde bir babel.config.js dosyası oluşturunuz. Var ise aşağıdaki gibi içeriğini düzenleyiniz.

module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["@locator/babel-jsx/dist", {
      env: "development",
    }]
  ]
};

Evet, artık bundan sonra yapmamız gereken tek şey. Projeyi yeniden başlatmak. Projenin çalıştığı tarayıcı sayfasına gidelim. Bundan sonra yapmamız gereken tek şey klavyeden ALT tuşuna basmak ardından bulmak istediğiniz nesneyi seçin.

Component’i bulduk.

Evet , proje içerisinde ki component i veya seçtiğimiz nesneyi bulmuş olduk. Bu şekilde artık bu component hangi sayfada idi veya hangi satırda idi diye aramak ile uğraşmamış oluyor ve ek olarak vakit kazanmış oluyorum.

Bu blog yazısınında sonuna gelmiş oluyoruz eğer anlamadığınız bir durum olur ise yorum bırakarak sormaktan çekinmeyin. Elimden geldiğince yardımcı olmaya çalışacağım. Bir sonrak ki blog yazımda görüşmek üzere hoşçakalın.

Kaynak : https://dev.to/michael_vp/introducing-locatorjs-click-on-react-component-to-get-to-its-code-2oj0