Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere React'te useEffect hook'unu kullanarak API verisi çekme işlemini adım adım göstermektedir.
- Videoda, VS Code'da temel bir React uygulaması kullanılarak, weatherapi.com API'sinden Londra'daki sıcaklık bilgisini çekme işlemi anlatılmaktadır. Eğitmen, useEffect hook'unu nasıl kullanacağını, async ve await anahtar kelimelerini nasıl uygulayacağını, fetch fonksiyonunu nasıl çağıracağını ve API'den gelen JSON verisini nasıl işleyeceğini göstermektedir. Ayrıca, her yenileme işleminde API'den gelen güncel sıcaklık bilgisinin nasıl güncelleneceği de açıklanmaktadır.
- 00:00React'te useEffect Hook ile API Verisi Alma
- Bu derste React'te useEffect hook'unun nasıl kullanılacağı gösterilecek, bu sayede bir hava durumu API'sinden veri alınacak.
- Örnek için bir temel React uygulaması ve useState ile useEffect hook'ları kullanılıyor.
- API, Londra'daki mevcut sıcaklık gibi hava durumu bilgilerini sağlayacak.
- 00:31API Çağrısı Hazırlama
- İlk adım olarak API çağrısı için bir URL değişkeni oluşturuluyor.
- useEffect hook'u kullanılarak bir fonksiyon oluşturuluyor.
- Fetch API çağrısını doğrudan kullanmak yerine, önce "fetchData" adında bir fonksiyon oluşturuluyor.
- 00:59Asenkron Fonksiyon ve Fetch Çağrısı
- "fetchData" fonksiyonu async anahtar kelimesiyle asenkron hale getiriliyor.
- Fetch fonksiyonu ile API çağrısı yapılıyor ve sonuç bir promise olarak döndürülüyor.
- useEffect içinde fetchData fonksiyonu çağrılıyor, bu nedenle dev konsolda iki kez response nesnesi görüntüleniyor.
- 02:09API Verisini İşleme
- API'den gelen response nesnesi bir okunabilir akış olarak görüntüleniyor.
- JSON nesnesine dönüştürmek için JSON.parse() metodu kullanılıyor.
- Promise'i JSON nesnesine dönüştürmek için then() fonksiyonu çağrılıyor.
- 03:00Verileri Kullanma
- API'den gelen JSON nesnesinde "current" ve "temp_f" gibi özellikler bulunuyor.
- "temp_f" değeri setTemp fonksiyonuna geçiriliyor.
- Uygulama her yenilendiğinde Londra'nın mevcut sıcaklığı görüntüleniyor ve bu değer yaklaşık her yarım saatte güncelleniyor.