React Context API ve Axios kullanarak verileri yönetme, büyük uygulamalarda veri aktarımını kolaylaştırır Bu yazıdaki örnek uygulama, bir e-ticaret uygulamasının ürün kataloğundan veri almayı göstermektedir Context API, verileri bir bileşkeden diğerine aktarmak için kullanılan yöntemdir Axios ise, HTTP çağrıları yapmak için kullanılır Axios'un kurulumu basittir ve kullanırken Promise temelli bir şekilde çalışır Axios ile HTTP istekleri yapmak daha verimli hale gelir Context API ve Axios, birleştirilerek React uygulamalarında verimliliği arttırabilir

React, günümüzde en popüler JavaScript kütüphanesi olarak kabul edilir ve etkileyici bir geliştirme topluluğuna sahiptir. Ancak, büyük uygulamalar geliştirirken verilerin aktarımı zorlu bir sorundur. Verileri bileşkeden bileşkeye aktarmanın birçok yolu vardır. Bunlardan biri de, React Context API kullanarak verileri yönetmek ve Axios kütüphanesi kullanarak HTTP çağrıları yapmaktır. Axios, verileri bir web sunucusundan almak, web sunucusuna göndermek, güncellemek veya silmek gibi işlemler için kullanılır.

Bu makalede, verileri dinamik bir şekilde yönetmenin en iyi yolu olarak React Context API ve Axios kullanarak bir örnek uygulama geliştirme sürecindeki adımlar ele alınacaktır. Yazımızın amacı, örnek bir uygulama geliştirirken Context API ve Axios'un nasıl birleştirilebileceğini göstermektir. Bu sayede, verileri daha etkili bir şekilde yönetebilir ve büyük React uygulamalarını kolaylıkla yönetebilirsiniz.

Bu yazıda kullanacağımız örnekte, bir e-ticaret uygulamasında kullanılabilecek bir ürün kataloğundan veri almanın basit bir yolunu göstereceğiz. Bu örnek uygulamada, Axios kütüphanesi ile bir RESTful API isteği göndererek verileri alacağız. Verileri daha sonra, Context API ile bileşenler arasında paylaşmayı öğreneceğiz ve useState() yöntemini kullanarak verileri saklayacağız.

Context API Nedir?

React, bileşenlerin birbirleriyle iletişim kurmasını sağlayan bir JavaScript kütüphanesidir. Context API ise, React uygulamalarında verileri bir bileşkeden diğerine aktarmak için kullanılan bir yöntemdir. React uygulamaları genellikle ağaç şeklinde hiyerarşik şekilde organize edilir ve bu nedenle, veriler bir bileşkenden diğerine aktarılmadığı takdirde, uygulama yapısını anlamak ve güncellemek oldukça zordur.

Context API kullanarak, ana bileşke içindeki verileri, alt bileşkelerin tamamına veya bir kısmına iletebilirsiniz. Bu, verilerini değiştirmeden, React uygulamanızdaki herhangi bir bileşkede kullanabileceğiniz geniş bir veriler havuzu sağlar. Context API çok yönlü bir araçtır, bu nedenle uygulamanızda birçok farklı veri türü için kullanabilirsiniz. Context API, React uygulamalarında verimliliği en üst düzeye çıkarmak için tasarlanmıştır.

Axios Nedir?

Axios Nedir?

Axios, JavaScript'te HTTP çağrıları yapmak için kullanılan bir kütüphanedir. Axios, Promise temelli bir şekilde çalışır ve hem tarayıcılarda hem de Node.js ortamlarında kullanılabilir. Axios, XMLHttpRequest ve fetch API'lerine kıyasla daha fazla özellik sunar ve modern bir geliştirici aracıdır. Axios, yönetimi kolaylaştıran HTTP isteklerini, durum kodlarını, başlıkları ve hata işlemesini kapsamlı bir şekilde yönetiyor. Axios ayrıca, WebSocket ve GraphQL gibi diğer protokollerle de uyumlu çalışabilir.

Axios kurulumu oldukça basittir ve npm yoluyla yüklenir. Yükleme işlemi tamamlandığında, tek yapmanız gereken, Axios'u projenize dahil etmek için bir import işlemi yapmaktır. Axios sayesinde, HTTP istekleri yaparken daha yüksek bir başarı oranı ve daha iyi bir veri yönetimi sağlanır. Axios, modern bir REST API yapılandırması oluşturmak için etkili bir araçtır ve React uygulamaları ile entegre halde kullanımı oldukça yaygındır.

Axios Kurulumu

React uygulamasında Axios'u kullanmak, önce Axios'u yüklemenizi gerektirir. Axios'u yüklemek için terminalde aşağıdaki komutu kullanabilirsiniz:

Bu komut, projenize Axios'u yükleyecektir. Axios, yüklendikten sonra projenizi başlatmak için normalde kullanacağınız komut olan "npm start" ile çalıştırılabilir hale gelecektir.

Axios Yükleme

Axios'u React uygulamasında kullanmak için öncelikle Axios'u yüklememiz gerekiyor. Bunun için aşağıdaki komutu kullanabilirsiniz:

Bu komutu React uygulamanızın bulunduğu dizinde terminalde çalıştırdıktan sonra Axios, projenize otomatik olarak yüklenmiş olacaktır. Axios artık kullanıma hazır!

Axios'u yüklemek için, aşağıdaki komutu kullanabilirsiniz:

• npm install axios

Bu komutu kullanarak Axios kütüphanesi yüklenir ve React uygulamanızda kullanıma hazır hale gelir.

Context API, React uygulamalarında verileri bir bileşkeden diğerine aktarmak için kullanılan bir yöntemdir. Çoğu zaman, veri iletimi, verileri ana bileşkeden alt bileşkenlere aktarmak için prop drilling yöntemiyle yapılır. Ancak, bu yöntem sırasında verilerinizi her bir bileşkeye yeniden taşımanız gerekir. Böylece, veri ağacı büyüdükçe, verileri taşımak giderek zor hale gelir. Context API, bu sorunu çözmek için kullanılır. Bu API, uygulamanız boyunca paylaşmak istediğiniz değerleri depolayarak, ana bileşkeden alt bileşkenlere aktarmanızı sağlar. Bu durum, her bileşkeye yeniden taşıma yapmadan veri taşımanın daha kolay bir yoludur.

Axios Kullanımı

Axios, JavaScript'teki HTTP çağrıları yapmak için kullanılan bir kütüphanedir ve birkaç farklı HTTP isteği yapabilirsiniz. GET, POST, PUT, ve DELETE işlemleriyle API'ye bağlanabilirsiniz. İstediğiniz veriyi belirleyip, bu isteği Axios kullanarak göndererek veriye erişebilirsiniz. Axios'un kullanımı oldukça basittir ve React Context API ile birlikte kullanmak verilerinizi daha iyi yönetmenizi sağlar.

Context API Kullanımı

React uygulamalarında verileri aktarmak için Context API oldukça kullanışlı bir yöntemdir. Context API, verileri bağlı bileşenler arasında paylaşmak için kullanılır. Böylece, verileri her bileşen için ayrı ayrı yeniden taşımak yerine, daha kolay ve daha efektif bir yöntemle verileri aktarabilirsiniz.

Context API kullanımı oldukça basittir. Öncelikle createContext() yöntemini kullanarak bir Context API oluşturmanız gerekmektedir. Daha sonra, Provider bileşenini kullanarak bileşen ağacını sarmalayarak, verileri paylaşmak istediğiniz bileşenlerinizi sarmalayabilirsiniz. Böylece, bu bileşenler arasında veri paylaşımı mümkün hale gelir.

Context API, React uygulamalarında her bileşkene ayrı ayrı veri geçirmek yerine, tüm ağaçta ortak bir veri kaynağı kullanmanızı sağlar. Bu sayede, kod yazarken daha az tekrar etmeniz ve daha az hatayla karşılaşmanız sağlanır. Aynı zamanda, uygulamanın performansını da artırır.

Context API Oluşturma

Context API kullanarak veri yönetimi yapmak için öncelikle createContext() yöntemini kullanarak bir Context API oluşturmanız gerekmektedir. Bu yöntem, bir context nesnesi oluşturur ve Provider bileşenine erişim sağlar.

Context API oluştururken createContext() yönteminin içine başlangıç değeri girilebilir. Başlangıç değeri, context'i kullanacak bileşenlere aktarılacaktır.

Örneğin:

{'const VeriContext = React.createContext("default veri");'}

Bu kod, VeriContext adında bir context nesnesi oluşturur ve default olarak "default veri" değerini başlangıç değeri olarak atar.

Başlangıç değeri göstermek istemiyorsanız, createContext() yöntemine başlangıç değeri olarak null girebilirsiniz. Bu durumda, context'i kullanacak bileşenler başlangıç değeri olmadan çalışacaklardır.

Örneğin:

{'const VeriContext = React.createContext(null);'}

Context API oluşturma işlemi bu kadar basit. Oluşturduğunuz context nesnesini kullanarak bileşenler arasında veri aktarabilirsiniz.

Context API Kullanımı

Context API, React uygulamalarında verileri bir bileşkeden diğerine aktarmak için kullanılan bir yöntemdir. Context API kullanarak, verileri bireysel bileşenler arasında tek bir yerde saklayabilir ve bu verilere, tüm bileşenler erişebilir. Bu nedenle, tüm bileşenlerde paylaşılan verilere bağlı ve güncellenenebilirsiniz.

Context API'ı kullanmak için, Provider bileşenini kullanarak bileşen ağacını sarmalamanız gerekir. Böylece, Context API tarafından sağlanan verileri bağlı bileşenler arasında paylaşabilirsiniz. Provider bileşenine, değer özelliği vererek, paylaşılan verileri sağlayabilirsiniz.

Provider bileşeninin, değer özelliği, paylaşılan verileri sağlar. Bu özellik, bir nesne veya bir fonksiyon da olabilir. Paylaşılan verileri tutmak için obje kullanmanızı öneririz. Örneğin:

```const myContext = React.createContext({ name: 'John Doe', age: 25});

function App() { return ( );}```

Yukarıdaki örnekte, myContext adlı bir Context API oluşturulur ve içindeki defaultValue, { name: 'John Doe', age: 25 } olarak belirtilir. Provider bileşeni, myContext'e bağlanır ve value özelliği { name: 'Jane Doe', age: 30 } olarak ayarlanır. Bu, ChildComponent bileşeninde depolanır ve context yöntemiyle erişilebilir hale gelir.

Bu şekilde, Provider bileşeni ve değer özelliği kullanarak, React uygulamalarında, verileri tüm bileşenlerde kolayca paylaşabilir ve yönetebilirsiniz.

Axios ile Context API Kullanımı

Axios ile Context API kullanımının avantajlarından biri, API isteklerindeki verileri daha kolay yönetebilmesidir. Axios, verileri iletişim yoluyla çeken kütüphane olduğu için, verileri context API ile daha etkili bir şekilde taşıyabilirsiniz.

Axios'un en iyi uygulamalarından biri, context içindeki ister nesnesini özgürce kullanmaktır. Bu sayede, her bir bileşkenin özellik setleri, bağımsız değişkenler ve durumlarını güncellemek yerine, bir ana bileşkeye bunları iletmek daha kolaydır. Bu yöntem, uygulamanızın performansı açısından büyük bir fark yaratabilir.

Bununla birlikte, verileri yönetmek için her zaman useState() yöntemini de kullanabilirsiniz. Bu, alınan verilerin kontrollü bir şekilde depolanmasını sağlar ve uygulamanın genel yönetimini kolaylaştırır. Özetle, Axios ile Context API kullanarak, API istekleri yapmak ve verileri yönetmek daha basit ve etkili bir hale gelebilir.

Axios İsteğini Yapmak

Axios kullanarak bir istek gönderirken, en iyi uygulama context'te tutmaktır. Bunu yapmak, verileri gerektiğinde paylaşmanızı kolaylaştırır ve birçok bileşen arasında tekrar tekrar istek göndermenize gerek kalmaz. İlk olarak, kullanıcı eylemini yakalamak için bir işlev oluşturabilir ve sonra Axios isteğini içinde oluşturabilirsiniz. İşte bir örnek:

function fetchData(url) {  return axios.get(url);}function Button() {  const { data, setData } = useContext(MyContext);  const handleClick = async () => {    try {      const result = await fetchData(url);      setData(result.data);    } catch (error) {      console.error(error);    }  };  return (    Fetch Data  );}

Bunu yaparak, Axios isteği yapan bileşenler arasında verileri paylaşmak çok daha kolay hale gelir.

Verileri Depolama

Verileri doğru bir şekilde almak kadar, işlemek ve doğru şekilde depolamak da önemlidir. Axios ile aldığınız verileri depolamak için React hooks'tan biri olan useState() yöntemini kullanabilirsiniz.

Bir önceki kısım olan "Axios İsteğini Yapmak" kısmında da bahsedildiği gibi, useEffect() yöntemiyle birleştirerek context state'i güncelleyebilirsiniz. Örneğin:

        const [data, setData] = useState(null);
        useEffect(() => {
         axios.get('/api/data')
          .then(response => {setData(response.data);})
          .catch(error => console.log(error));
        }, []);
            

Bu şekilde, aldığınız verileri kullanmak için istediğiniz zaman kullanabileceksiniz. Ayrıca, yanıtı oluşturarak belirli bir bileşen üzerinde işlemler yapabilirsiniz.

Örnek Kullanım

Bu örnek uygulama, Context API ve Axios'u kullanarak API'den veri çekmenin kolay bir yolunu gösterir. İlk olarak, Axios ile bir HTTP GET isteği yapmak için bir işlev yazacağız. Bu işlev, verileri bir dizi içinde depolayacak.

Sonra, createContext() yöntemi ile bir Context API oluşturacağız. Bu Context API, diğer bileşenler tarafından erişilebilen verilerin erişim noktası olacak. Ardından, bu Context API'ı Provider bileşeni ile sarmalayarak bileşen ağacımızın içine dahil edeceğiz.

Context'i kullanan bileşenler, useContext() yöntemini kullanarak bu verilere erişebilirler. Bu örnekte, bir Currencies bileşeni kullanarak, API'den dönen para birimi verilerini listeleyeceğiz.

Aşağıdaki kod örneği, Context API ve Axios kullanarak API'den para birimi verileri çekmenin nasıl yapılabileceğini gösterir:

import React, { useEffect, useState, createContext, useContext } from "react";import axios from "axios";const CurrenciesContext = createContext([]);export const CurrenciesProvider = ({children}) => {  const [currencies, setCurrencies] = useState([])  const [loading, setLoading] = useState(false)  const fetchData = async () => {    setLoading(true)    const response = await axios.get("https://api.exchangeratesapi.io/latest?base=USD")    setCurrencies(response.data.rates)    setLoading(false)  }  useEffect(() => {    fetchData()  }, [])  return (          {children}      )}export const useCurrencies = () => useContext(CurrenciesContext)export const Currencies = () => {  const { currencies, loading } = useCurrencies()  if (loading) {    return 
Yükleniyor...
  }  return (    
      {Object.keys(currencies).map(currency => (        
{currency}: {currencies[currency]}
      ))}    
  )}