Axios ve Reactjs ile JSON Verisi Nasıl Çekilir?

Reactjs hayatımıza yumuşak ama sağlam bir giriş yaptı. Tabii ki her fani gibi bir gün React de bir gün aramızdan ayrılacak / popülaritesi bitecek. Ancak one-way data binding , dilediğiniz zaman state güncelleyebilme, atomik düzeyde geliştirmeye imkan tanıması gibi özellikleri React’i benim için vazgeçilmez kılıyor. Öyleyse öğrenmeye, denemeye ve paylaşmaya devam.

Bu yazıda sizlerle Axios ile React tabanlı projeleriniz json datalarını okumanın pratik bir yolunu göstereceğim. Yazı biraz uzun olsa da aslında axios ile get işlemi sadece tek satırlık bir işlem. Gerisi React lifecycle metodları ve state yönetimi gibi rutin işlemler.

İlk olarak Axios nedir buna bir değinelim:

Axios, async-await yapısını kullanabilmenizi sağlayan promise tabanlı mini minnacık bir http client’dır.

Junior özel: axios react için kullanabileceğiniz binlerce paketten biridir. Amacı herhangi bir kaynaktan veri almanızı kolaylaştırmaktır. Örneğin Firebase’den json formatındaki verileri tek satırda alabilirsiniz. Async-await dediğimiz de bir kodun, çağrıldığı anda çalışması yerine çağrıldıktan bir süre sonra çalışmasıdur.

Axios ile React’i birlikte kullanmanın mutlaka birçok yöntemi vardır. Ancak burada, projelerimde sıklıkla kullandığım ve çok sevdiğim bir yöntemi adım adım göstereceğim.

1. json dosyasından alınacak verilerin adresleneceği array tipinde state’i oluşturma işlemi
2. componentDidMount fonksiyonu içersinde axios ile json verisini çağırma ve setState işlemi
3. render metodu içerisinde map -ve gerekirse filter- kullanarak html elementlerini oluşturma işlemi
4. oluşturulan element(ler)i gerekli yerde çağırma işlemi

Yazıldığı kadar uzun bir işlem değil aslında. Gözünüz korkmasın. Başlığı aradığınızda bulacağınız kaynaklar sadece 2. adımı anlatıp bırakır diye diğer adımları da anlatıyorum. Sadece axios ile react içerisinde get metodunun kullanımını görmek için 2. adım bile yeterli olacaktır.

componentDidMount: Component mount edildiğinde apar topar çağrılan methodumuz. DOM’a etki eden bir şeyin tanımlanması gereken yer burası. Atıyorum D3.js gibi third party bir library kullanacaksanız, başlangıç değerlerini burada atayın. Bir API çağıracaksanız, bir şeyi fetch edecekseniz en müsait yer bu method.. https://ysfzrn.gitbooks.io

json dosyam yok ne yapacağım diyorsanız jsonplaceholder sitesinden faydalanabilirsiniz. Buradaki örneği de jsonplaceholder sitesindeki amme hizmeti json dosyasını kullanarak gerçekleştireceğim. (https://jsonplaceholder.typicode.com/posts)

Önemli 1: Başlamadan önce projenize axios paketini yüklemelisiniz.

# Yarn kullanıyorsanız 
$ yarn add axios # npm kullanıyorsanız 
$ npm install axios --save

Önemli 2 : Paketi yükledikten sonra Axios’u hangi component içerisinde kullanacaksak orada import etmemiz gerekiyor.

Adım 1

State tanımlama işlemini gerçekleştirmek için basit, boş bir array oluşturuyoruz. Ben burada constructor içerisinde pages state’imi oluşturdum.

Adım 2

Asıl mesele burada aslında. Başlangıçta oluşturduğumuz için boş pages adlı dizinin değerini setState ile axios htpp client üzerinden elde ettiğimiz json datasına eşitliyoruz.

Adım 3

Buradaki örnekte jsonplaceholder içerisinden aldığımız post’lardan sadece userId özelliği 2 olan post’ları alacağız. Bu nedenle filter metodunu da kullandık. Ancak siz isterseniz bunu kullanmayabilirsiniz. Eğer öyle bir durum varsa .filter ile başlayan satırı yok sayarak direkt map metodunu kullanın.

Map ve Filter metodları bir dizi içerisinde her bir elemanda işlem yaparak buna göre bize sonuç getirirler. Filter, verdiğimiz şartı yerine getiren var mı diye dizi elemanlarını tek tek kontrol eder. Map metodu ise bu elemanlara tek tek gider ve sizin istediğiniz özelliklerini alır, bizim istediğimiz html etiketleri içerisinde gösterecek şekilde adresler. Biz de bunları const (veya let) ile bir değişkene atayıp return içerisinde kullanırız.

Adım 4

pages değerini return içerisinde {pages} olarak çağırabiliyoruz. Bu durumda render içerisindeki durum şöyle olacaktır.

Gördüğünüz gibi bu yolla, json verisi çekmek gerçekten çocuk oyuncağı. Olabildiğine basit bir işlem.

Sonradan öğrendiğimiz her şey gibi tekrar ederek pekiştirmeniz gereken bir konudur. Mutlaka bu yazının eksik kısımları olabilir. Ancak anlatamadığım bir kısım varsa buralardayım. Lütfen yorumlarınızda eksik kısımları bana bildirin.

Bir daha ki sefere Axios ve React ile json Post işleminde görüşmek üzere 🙂 Hoşçakalın!