React Native Dersleri 07 - Network Request & Data Render

Network Request & Data Render

Bu hafta 5. hafta oluşturduğumuz liste component'ini kullanarak network request yapacağız. Bunu yaparken de API olarak buradan kullanıcıları çekeceğiz. Kullanacağımız link için tıklayınız. 

---

Nedir bu API/REST API?

REST API, geliştiricilerin HTTP protokolünü kullanarak GET ve POST gibi isteklerde bulunup, bu isteklere çeşitli formatlarda yanıt aldığı bir dağıtık sistemdir. REST (Representational State Transfer), Temsili Durum Aktarımı olarak Türkçede de kullanılır. REST’in tüm prensiplerini yerine getiren API’ler ise RESTful olarak nitelendirilir.

REST API, gelişticilerin hakim olduğu SOAP ve WSDL tabanlı web servislerine benzer ancak daha basite indirgenerek geliştirilmiştir. REST API kullanılırken web tarayıcılarının sayfa transfer sürecini bir parçası olan HTTP fiilleri kullanılarak haberleşilir. Dolayısıyla geliştirici olarak size tanıdık gelen GET, POST, PUT DELETE vb. filler REST API ile haberleşmede oldukça yaygın kullanılır. HTTP protokolünü kullanıyor olması nedeniyle REST API’i pratik olarak herhangi bir programlama dilinde kullanabilir. REST API’yi yazılımlarınızda kullanarak yazılımınızın uzun ömürlü olmasını sağlayabilir ve gelişimini pozitif yönde destekleyebilirsiniz.

REST ile aktarılan verilerin formatı HTML, JSON, XML veya farklı bir formata sahip olabilir. Diğer katı kurallı ve dediğim dedik API’lerin aksine REST, geliştiriciler için bu konuya bir kısıtlama getirmez.

---

Projemizde API'yı axios http client'ı ile çekeceğiz. Axios ile ilgili daha fazla bilgi için buradan yararlanabilirsiniz.

Öncelikle projemizin içine axios'u indiriyoruz. Git bash'den ya da cmd'den dosyamızın içine girerek npm install --save axios diyoruz.

Sonraki adımdaysa projemizin içine girip ders 5'te oluşturduğumuz Listem.js'in içine axios'u import ediyoruz.

Böylece axios'u projemize tanımlamış oluyoruz. Artık baştaki link ile birlikte projemizin içine kullanıcıları çekmeye hazırız. ComponentWillMount() ve axios'u kullanarak aşağıdaki gibi bilgileri API'den çekiyoruz.

Verileri çekip çekemediğimizi anlamak için öncelikle verileri console.log içine yolluyoruz ve emulatorümüzden ders 6'da öğrendiğimiz gibi choreme debug sayfasını açarak geliştirici araçlarını açıyoruz.

Sağda görüldüğü gibi kullanıcı verilerini çekebilmişiz. Sırada projemizde göstermek var. Göstermeden önce ders5'te yaptığımız Header'ın içindeki Listem başlığını Users'a dönüştürüyoruz.

Ve projemizde göstermeye geçiyoruz:

ComponentWillMount'un içindeki then() kısmını düzenliyoruz. Render'ın içine console.log('Data ' + this.state) diyoruz ve RenderData() oluşturarak burada çektiğimiz datalardan hangisini göstemek istiyorsak ona göre map ediyoruz. Ben burada ilk olarak name'i çektim.

Sonuç olarak projemizde çektiğimiz data böyle gözüküyor:

Kaynakça :

https://aligoren.com/axios-nasil-kullanilir/
https://jsonplaceholder.typicode.com/
https://reactjs.org/docs/react-component.html#componentwillunmount
https://www.youtube.com/watch?v=MJizZprt5L4&index=8&list=PL7IDRvZfAwrv5xZLu67rNiDHD9k5YLViX
https://wmaraci.com/nedir/rest-api