Bu makalede, React ve Axios kütüphanelerinin nasıl entegre edileceği konusunda ayrıntılı bilgiler verilir Axios, sunucu ve istemci arasındaki veri alışverişini kolaylaştıran bir kütüphanedir ve React projelerinde oldukça yaygın olarak kullanılır Makalede ayrıca, Axios kullanarak Oluştur, Oku, Güncelle ve Sil CRUD operasyonları nasıl gerçekleştirilebileceği de ele alınır Axios'un temel metodlarından biri olan GET kullanımı da örnek senaryolarla açıklanır Bu makale, web geliştiricilerine React ve Axios kullanımı konusunda faydalı bir kaynak olabilir

React, günümüzün en popüler Javascript kütüphanelerinden biridir. React uygulamalarında sunucu ve istemci arasında veri alışverişi yapmak için Axios kullanımı oldukça yaygındır. Bu makalede, Axios ve React'in bir arada kullanımı ile CRUD operasyonlarının nasıl yapıldığı tartışılacaktır. CRUD operasyonları şunlardır: Oluştur, Oku, Güncelle ve Sil.

Axios, Javascript uygulamalarında, sunucu ve istemci arasında veri alışverişi yapmak için kullanılan bir kütüphanedir. Pacman özellikleri (promise based, easy to use etc.) ile birlikte, React'ta önemli bir yere sahip olmuştur. React projelerine Axios kütüphanesi, npm paket yöneticisi ile kurularak entegre edilebilir. Bu şekilde, Axios'un React ile nasıl kullanılacağı detaylı olarak ele alınabilir.

Axios Nedir?

Axios, Javascript uygulamalarında istemci ve sunucu arasında veri alışverişi yapmak için kullanılan açık kaynak kodlu bir kütüphanedir. Axios, RESTful API'ler de dahil olmak üzere çeşitli HTTP protokollerini desteklemektedir. Bu nedenle, veri alışverişi işlemlerini gerçekleştirmek için birçok geliştirici tarafından tercih edilmektedir.

Axios, modern web uygulamaları için özellikle önemli olan asenkron işlemleri yönetmek için Promise tabanlı bir yaklaşım kullanmaktadır. Ayrıca, axios'un kolay kullanımı ve etkili hata yönetimi özellikleri de geliştiriciler tarafından beğenilmektedir. Axios, React projelerinde kullanıldığında, sunucu ve istemci arasında veri alışverişi yapmak için çok kullanışlıdır.

React ve Axios Nasıl Entegre Olunur?

React uygulamalarına Axios kütüphanesi entegre ederek, sunucu ile istemci tarafı arasında veri alışverişi yapmak mümkündür. Axios, React dışındaki uygulamalarda da kullanılabildiği gibi, React ile de kolayca entegre edilebilir.

Axios'un React ile entegrasyonu, npm paket yöneticisi kullanılarak gerçekleştirilir. Axios kütüphanesi projeye npm aracılığıyla eklenerek, uygulama içerisinde çağrılabilir hale getirilir.

Entegrasyonun gerçekleştirilmesi için öncelikle proje klasöründe terminal üzerinden aşağıdaki komut satırı kullanılır:

npm install axios

Axios kütüphanesi projeye eklenerek, React bileşenleri içerisinde çağrılabilir hale getirilir. Axios çağrılarının yapıldığı bileşenlerde, 'import axios from "axios";' şeklinde import edilmesi gerekmektedir.

• Öncelikle, axios kütüphanesi projeye eklenir:

• npm install axios

• React bileşenleri içerisinde axios, import edilir:

• import axios from "axios";

Bu şekilde, Axios kütüphanesi React projelerinde kullanılmaya hazır hale gelir.

CRUD Operasyonlarının Gerçekleştirilmesi

CRUD operasyonları, web uygulamalarında sık sık kullanılan işlemler arasında yer almaktadır. Axios kullanarak RESTful API'lar oluşturmak ve bu API'leri kullanarak CRUD operasyonlarını gerçekleştirmek oldukça kolaydır. CRUD işlemlerinin nasıl yapılabileceği konusunda daha detaylı bilgi için öncelikle React ve Axios entegrasyonunu sağlamak gerekmektedir. Bu adımdan sonra basit bir CRUD işleminin nasıl yapıldığı adım adım ele alınabilecektir.

Axios'un kullanımıyla ilgili örnek bir CRUD işlemi yapmak isterseniz, öncelikle bir RESTful API oluşturmalısınız. Daha sonra Axios ile bu API'ye bağlanarak CRUD işlemlerini gerçekleştirebilirsiniz. CRUD örneği için öncelikle bir API endpoint oluşturarak, bu endpoint'e GET, POST, PUT ve DELETE metodları ile erişebilmemiz gerekmektedir. Axios kullanarak bu endpoint'e veri okuma, oluşturma, güncelleme ve silme işlemleri gerçekleştirmemiz mümkündür.

Bir örnek senaryoda, bir müşteri listesi oluşturmak için Axios kullanımı ele alınabilir. Bu senaryoda, API'ye müşteri bilgileri POST yöntemiyle eklenebilir. Daha sonra, API'ye GET yöntemiyle erişildiğinde, eklenen müşteri bilgileri liste halinde görüntülenebilir. Listelenen müşterilerden herhangi birisi güncellenmek istendiği takdirde, PUT yöntemi kullanılarak güncelleme gerçekleştirilebilir. Son olarak, DELETE yöntemi kullanılarak silme işlemi gerçekleştirilebilir.

CRUD işlemleri Axios kullanarak oldukça kolaydır ve bu işlemleri gerçekleştirmek için fazla HTML bilgisi de gerekmez. Axios kullanarak bu işlemleri gerçekleştirirken, kodların okunabilirliği ve güvenilirliği artırılır. Bu nedenle Axios, RESTful API'lerin oluşturulmasında ve web uygulamalarının geliştirilmesinde önemli bir role sahiptir.

1. Veri Okuma (GET)

Axios, Javascript uygulamalarında RESTful API'lar aracılığıyla sunucu ve istemci arasında veri alışverişi yapmak için kullanılan açık kaynak kodlu bir kütüphanedir. Veri okuma işlemi için Axios'un GET metodunu kullanabilirsiniz.

Veri okuma işlemi için, Axios'un get() metodunu kullanarak, istek yapacağımız API'nin yolunu parametre olarak belirtiyoruz. Öncelikle, Axios'u projemizde kullanmak için kurulumunu gerçekleştiriyoruz ve sonra axios.get() fonksiyonu ile istek yapacağımız API'nin yolunu belirliyoruz. İlk olarak, başlıkları içeren tablo ve kod örneği aşağıdaki gibidir:

npm install axios

axios.get('/api/users')

Yukarıdaki kod örneğinde '/api/users' parametresi, istek yapacağımız API'nin yolunu temsil eder. Axios'un get() metoduna verilen parametreler ile API'ye istek yapılır ve sonuç olarak bir Promise döner. Bu Promise, .then() yöntemi ile başarılı bir şekilde tamamlandığında, API'den dönen verileri içeren bir yanıt nesnesi döndürür. Aşağıdaki kod örneği, Axios'un get() metodunu kullanarak bir API'den veri okuma işleminin nasıl gerçekleştirileceğini göstermektedir:

axios.get('/api/users')  .then(function(response){    console.log(response.data);   })   .catch(function(error){     console.log(error);   });

Bu şekilde Axios kullanarak bir API'den veri okuma işlemi gerçekleştirebilirsiniz.

2. Veri Oluşturma (POST)

Axios kullanarak React uygulamalarında API'ye veri oluşturma işlemi, POST metodu kullanılarak gerçekleştirilir. Aşağıdaki adımlar, Axios ile bir API'ye veri oluşturma işleminin nasıl yapılacağını adım adım göstermektedir:

• İlk olarak, Axios paketi React projesine dahil edilir. Bunu yapmak için, terminal (komut istemi)de projenin bulunduğu dizine girilir ve "npm install axios" komutu çalıştırılır. Bu, Axios paketinin projeye yüklenmesini sağlayacaktır.
• Veriler, bir form aracılığıyla kullanıcı tarafından girilir.
• Formun "submit" olayı için bir olay dinleyicisi oluşturulur.
• Oluşturulan olay dinleyicisi ile, formda girilen veriler Axios'un post metoduyla API'ye gönderilir.
• API, gönderilen verileri işleyerek bir yanıt döndürür. Yanıt, Axios tarafından alınır ve kullanıcıya gösterilir.

Yukarıdaki adımların açıklamalarına detaylı olarak bakacak olursak;

• İlk adımda, Axios React projesine npm paket yöneticisi ile kurularak dahil edilir. Bunun için projenin bulunduğu dizine gelinir ve "npm install axios" komutu çalıştırılır.
• Verilerin kullanıcı tarafından girilmesi için bir form oluşturulur. Formda, POST metodu ile gönderilecek verilere ait girdi alanları oluşturulur.
• "Submit" butonuna bir olay dinleyicisi eklenir. Bu dinleyici fonksiyonu, verileri JSON formatında toplar ve Axios'un post metodu ile API'ye gönderir.
• API, gönderilen verileri işleyerek bir yanıt döndürür. Yanıt, Axios tarafından alınır ve kullanıcıya gösterilir. Axios, yanıtı JSON formatında alır ve gerekirse işleyerek kullanıcıya sunar.
• Veri oluşturma işlemi başarıyla tamamlanır.

Yukarıdaki adımları takip ettiğinizde, Axios kullanarak React uygulamalarında bir API'ye veri oluşturma işlemini kolayca gerçekleştirebilirsiniz.

3. Veri Güncelleme (PUT)

Axios’un PUT metodunu kullanarak bir API’deki verileri güncelleme işlemi oldukça kolaydır. Bu işlemi gerçekleştirmek için şu adımları izleyebilirsiniz:

• İlk olarak, Axios PUT metodu kullanılarak güncelleme işlemi gerçekleştirilecek API url adresi belirlenmelidir.
• Sonrasında, güncelleme işlemi yapılacak bilgilerin yer aldığı bir nesne oluşturulmalıdır.
• Bu nesne, Axios’un ikinci parametre olarak gönderdiği verilere dönüştürülmelidir.
• Güncelleme işlemi için Axios PUT metodunu kullanarak, ilk parametre olarak belirlenen url adresi, ikinci parametre olarak oluşturulan veri nesnesi gönderilmelidir.
• Güncelleme işlemi başarılı bir şekilde gerçekleştirildikten sonra, API tarafından yeni veriler döndürülecektir.

Bu adımları izleyerek, Axios kullanarak bir API’deki verileri güncelleyebilirsiniz.

4. Veri Silme (DELETE)

Axios'un DELETE metodunu kullanarak React uygulamalarında bir API'den veri silmek oldukça kolaydır. İşlem adımları şöyledir:

1. İlk olarak, kullanılacak olan veri silme API'si belirlenir.
2. Sonrasında, Axios'un delete() fonksiyonu kullanılarak API'den request gönderilir. Bu işlem şu şekilde gerçekleştirilir:

axios.delete(`API_URL/${id}`).then(res => {console.log(res);console.log(res.data);})

3. Request gönderildikten sonra, API'deki veriler silinir.

Bu adımlar uygulanarak Axios kullanarak React uygulamalarındaki veriler kolayca silinebilir.

Sonuç

Axios kütüphanesi, React projelerinde veri alışverişi işlemlerini büyük ölçüde kolaylaştırmaktadır. Axios sayesinde, sunucudan veri alma, sunucuya veri gönderme, veri güncelleme ve veri silme işlemleri basit bir şekilde gerçekleştirilebilmektedir.

Bu makalede, Axios'un React ile entegrasyonu ve CRUD operasyonları hakkında ayrıntılı bilgiler verildi. Axios'un GET, POST, PUT ve DELETE metodları ile adım adım veri okuma, oluşturma, güncelleme ve silme işlemleri örneklerle anlatıldı. Bu şekilde, okuyucuların Axios kullanarak React projelerinde veri alışverişi işlemlerini kolaylıkla gerçekleştirme konusunda bilgi sahibi olmaları beklenmektedir.