React uygulamalarında Fetch API kullanarak veri almak oldukça yaygın bir yöntemdir Bu API, modern bir API olduğu için HTTP isteklerini yapmak için kullanılır ve verileri XML, JSON ve diğer formatlarda alabilir Fetch API, asenkron olarak çalışır ve Promise tabanlıdır, dolayısıyla daha dinamik bir programlama yapısı sunar Bu sayede, işlemlerin ardışık olarak yürütülmesi kolaylaşır ve async/await yapısı ile birleştirilebilir JSON, web uygulamalarında sıklıkla kullanılan bir veri formatıdır Verilerin kullanıcı tarafında da kolayca okunabilmesi, data transferlerinin hızlı yapılabilmesi ve açık kodlanabilirliği, JSON formatının en büyük avantajları arasında yer almaktadır Fetch API kullanarak, JSON verileri alınarak, React bileşenlerinde kullanılabilir hale getirilebilir Verilerin parçalanması ve kullanılabilir hale getirilmesi için, json yöntemi kullanılabilir Parçalanan veriler, React öğelerinde kullanılabilir hale getirilerek gösterilebilir

React uygulamalarında, verileri almak ve göstermek için Fetch API kullanmak yaygın bir yöntemdir. Fetch API, modern bir API'dir ve HTTP isteklerini yapmak için kullanılır. Bu API ile, verileri JSON formatında almak ve işlemek mümkündür.

JSON (JavaScript Object Notation), web uygulamalarında kullanılan hafif bir veri formatıdır. Bu format, anlaşılması kolaydır ve RESTful API'lerde sıklıkla kullanılır. Fetch API kullanarak, JSON verileri alınarak, React bileşenlerinde kullanılabilir hale getirilebilir.

Fetch API Nedir?

Fetch API Nedir?

Fetch API, modern bir API olarak, HTTP istekleri yapmak için kullanılır. Fetch API, XML, JSON ve diğer veri formatlarını alabilen bir arayüze sahiptir. Bu API sayesinde, sunucu tarafından gelen yanıtın yanı sıra, metotlar, başlıklar ve diğer istek parametrelerini alabilirsiniz.

Bunun yanında, Fetch API, asenkron olarak çalışır ve yapılandırılabilir. Yani, indirme işlemi tamamlandığında, yanıtı üzerinde hareket edebilirsiniz. Bu daha önce kullanılan XMLHttpRequest nesnesindeki bir özelliğin yokluğudur. Dolayısıyla Fetch API, AJAX isteklerinde kullanılmak üzere geliştirilmiştir.

Ayrıca Fetch API, Promise tabanlıdır ve bu sayede daha dinamik bir programlama yapısı sunar. Bu sayede, işlemlerin ardışık olarak yürütülmesi kolaylaşır ve async/await yapısı ile birleştirilebilir. Bu sayede, daha temiz ve okunaklı kodlar yazmanıza olanak tanır.

JSON Nedir?

JSON (JavaScript Object Notation) veri formatı, açık ve anlaşılır bir kodlama biçimidir. Bu format, verileri birçok farklı programlama diliyle kullanılabilir, okunabilir ve yazılabilir hale getirir. JSON'un yapısı, nesneler (objects) ve diziler (arrays) şeklindedir.

JSON verilerinde, nesne özellikleri anahtar-değer çiftleri (key-value pairs) olarak belirtilir. Bu özellikler, çift tırnak içinde yazılır ve iki nokta ile ayrılır. Diziler ise, köşeli parantezler içinde virgülle ayrılmış veri elemanlarıdır. JSON, XML'den daha hafif ve daha okunaklı olduğu için, internet tarayıcıları ve web uygulamaları için ideal bir veri formatıdır.

JSON formatı, modern web geliştirme dünyasında sıkça kullanılan bir veri formatıdır. Verilerin kullanıcı tarafında da kolayca okunabilmesi, data transferlerinin hızlı yapılabilmesi ve açık kodlanabilirliği, JSON formatının en büyük avantajları arasında yer almaktadır. JSON veri formatı genellikle RESTful API uygulamalarında kullanılmaktadır.

JSON Verilerini Fetch API ile Alma

React uygulamasında Fetch API kullanarak JSON verilerini alma işlemi oldukça basittir ve bu işlem adımları şu şekildedir:

• Fetch API ile veri almak için öncelikle bir istek yapmak gerekmektedir.
• Gelen verilerin parçalanarak kullanılabilir hale getirilmesi gerekmektedir.
• Render edilen verilerin, belirli bir bileşene atanarak gösterilmesi.

Bu adımları inceleyecek olursak:

Fetch API kullanarak veri alımında ilk adım, bir istek yapmaktır. Bu istek, API endpoint'ine doğru yönlendirilir ve geriye JSON verileri döndürülür. Aşağıdaki örnekte bir istek örneğini görebilirsiniz:

Gelen veriler, JSON formatında olduğundan, kullanılabilir hale getirmek için önce bu verilerin parçalanması gerekmektedir. Bu işlem, .json() yöntemi ile yapılabilmektedir. Aşağıdaki örnekte istek sonucu dönen verilerin parçalanması görülmektedir:

fetch("https://example.com/api/data")  .then(response => response.json())  .then(data => {    console.log(data); // { "data": [{ "id": 1, "name": "John" }, { "id": 2, "name": "Jane" }] }  });

Parçalanan veriler artık kullanıma hazırdır ve React öğelerinde kullanılabilir hale getirilerek gösterilebilir. Örneğin, yukarıdaki JSON verileri bir tablo içinde gösterilebilir:

Fetch İsteği (Request) Yapma

React Fetch API kullanarak JSON verilerini alma işleminin ilk adımı, veriyi sunucudan istemektir. Bu adımda Fetch API'nin fetch() fonksiyonunu kullanarak veri isteği (request) yapabiliriz.

Örneğin, aşağıdaki kod bloğunda, fetch() fonksiyonunu kullanarak URL'ye bir get isteği yaparak verileri alıyoruz. İsteğin sonucunda gelen verilerin işlenmesi, aşağıdaki .then() bloğunda gerçekleştirilecektir.

fetch('http://example.com/data.json')  .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.error(error))

Yukarıdaki kod bloğunda, fetch() fonksiyonunun içine çekmek istediğimiz verinin URL'sini verdik. Bu fonksiyon ile gönderdiğimiz get isteği sonucunda bize bir response objesi dönecektir. Bu response objesinin json() fonksiyonu ise response body'sindeki JSON verilerini bir JavaScript objesine dönüştürebilir. Eğer response body'sindeki veriler başka bir format ise farklı fonksiyonlar kullanılabilir.

fetch() fonksiyonu ile yapılan isteklerden bir sonuç elde edilmez ise .catch() bloğu çalışacaktır. Bu blok, hata mesajını konsola yazdıracaktır.

JSON Verilerini Parçalama

Fetch API ile aldığımız veriler genellikle JSON formatındadır. Bu nedenle alınan verilerin kullanılır hale getirilmesi gerekmektedir. Kullanıcıya veriyi gösterebilmeden önce, gelen JSON verilerinin parçalanması gerekir. Parçalama işlemi, veriyi kullanılacak hale getirmek için yapılır.

JSON verileri iki ana veri tipinden oluşmaktadır: diziler ve nesneler. Nesneler, anahtar (key) ve ona karşılık gelen bir değerden (value) oluşurken, diziler ise bir dizi değer içerir. Verileri parçalamak için, JSON verilerini JavaScript nesnelerine (objects) dönüştürmek gerekir. Bunun için, response.json() fonksiyonu kullanılır. Bu fonksiyon, JSON verilerini JavaScript nesnelerine dönüştürür.

Yukarıdaki örnekte, fetch() API kullanılarak veriler isteniyor. .then() fonksiyonu, gelen yanıtı JSON'a dönüştürür ve son olarak console.log() ile parçalanan veriler konsola yazdırılır.

Bu verileri kullanmak için, örneğin bir listede veya bir tabloda göstermek isteyebiliriz. Bunu yapmak için, parçalanan verileri bir değişkene atayarak kullanılabilir hale getirmemiz gerekiyor. Bu şekilde verileri kullanarak, React bileşenleri içerisinde gösterebiliriz.

JSON Verilerinin Gösterilmesi

JSON verileri, Fetch API kullanarak alındıktan ve parçalandıktan sonra, React uygulamasında belirli bir bileşene atanarak gösterilir. Bu bileşen, verilerin render edildiği ana bileşen olabilir. Şimdi, render işlemini gerçekleştirmek için bir örnek oluşturalım.

Örnek olarak, bir REST API'den alınan bir dizi ürün objesi var diyelim. Bu objeleri alabilmek için, önce Fetch API kullanarak bir istek yapmamız gerekiyor. Daha sonra, gelen verileri parçalamalı ve kullanılabilir hale getirmeliyiz. Son olarak, verileri belirli bir bileşene atanarak göstermeliyiz.

Aşağıdaki örnekte, render işlemini gerçekleştirmek için basit bir bileşen kullanıyoruz. Bu bileşen, ürünleri bir tablo olarak görüntüler:

```javascriptimport React, { useState, useEffect } from 'react';

const ProductTable = () => { const [products, setProducts] = useState([]);

useEffect(() => { fetch('products.json') .then((response) => response.json()) .then((data) => setProducts(data.products)); }, []);

return (

export default ProductTable;```

Yukarıdaki örnek kod, fetch API kullanarak products.json dosyasından veri çekiyor. useEffect kancası sayesinde veriler bileşene yükleniyor. Sonra, gelen veriler map () fonksiyonu ile bir liste olarak parçalanıyor.

Bu bileşen, verileri belirli bir bileşene atayarak göstermek için kullanılıyor. Yukarıdaki örnekte, ürünleri bir tablo olarak gösteriyoruz. Ancak, verileri farklı şekillerde render etmek için farklı bileşenler kullanabilirsiniz.

Özetlemek gerekirse, JSON verilerini React Fetch API kullanarak alabilmeniz ve belirli bir bileşene atayarak gösterebilmeniz mümkündür. Bu işlem, React uygulamaları için oldukça önemlidir ve web geliştirmede sık sık kullanılır.

Örnek Uygulama

React Fetch API ile JSON verileri almak oldukça kolay bir işlemdir. Bu örnekte, React Fetch API kullanarak bir uygulama geliştirme örneği vereceğiz. İlk olarak, bir React projesi oluşturmanız gerekmektedir. Eğer henüz bir React projesi oluşturmadıysanız, "create-react-app" paketi kullanarak bir proje oluşturunuz.

Sonrasında, Fetch API yardımıyla JSON verilerini almak için gereken isteği yapmanız gerekmektedir. Bunun için, "fetch()" yöntemini kullanabilirsiniz. Bu yöntem, bir URL'ye bir istek yapmanıza ve yanıtı aldıktan sonra bu yanıtı JSON formatında okumanıza olanak tanır.

Örnek bir uygulama geliştirme aşamasında, Fetch API kullanarak JSON verilerini alma işlemini tamamladıktan sonra, gelen verileri uygulamada göstermeniz gerekmektedir. Bunun için, React bileşenlerini kullanarak belirli bir bileşene atanması gerekir. Bu bileşen, HTML sayfasında belirli bir bölümde gösterilebilir.

      fetch('https://jsonplaceholder.typicode.com/users')      .then(response => response.json())      .then(data => console.log(data));      

      class App extends Component {        state = {          users: []        }        componentDidMount() {          fetch('https://jsonplaceholder.typicode.com/users')          .then(response => response.json())          .then(data => this.setState({ users: data }));        }        render() {          return (            <div className="App">              <ul>                {this.state.users.map(user => (                  <li key={user.id}>{user.name}</li>                ))}              </ul>            </div>          );        }      }      

Bu örnekte, bir React bileşeni olan "App" sınıfı içinde Fetch API kullanarak JSON verileri alınmaktadır. Gelen veriler, "state" için tanımlanan "users" değişkenine atanır ve sonrasında "map()" yöntemi kullanarak kullanıcı adlarının ekranda görüntülenmesi sağlanır.

Bu örneği inceleyerek, Fetch API kullanarak JSON verilerini React uygulamalarında nasıl gösterebileceğinizi öğrenebilirsiniz.

React Projesinin Kurulması

React kullanarak Fetch API ile JSON veri alma işlemi için öncelikle bir React projesinin oluşturulması gerekmektedir. Bunun için Node.js ve NPM (Node Package Manager) yüklü olmalıdır. Sonrasında terminal üzerinden ```npx create-react-app my-app``` komutu çalıştırılarak proje oluşturulur.

Proje oluşturulduktan sonra, Fetch API ile veri çekebilmek için ```fetch``` fonksiyonuna ihtiyaç duyulur. Bu fonksiyon, tarayıcı tarafından sunulan Promise API'si üzerinde çalışır. Yani bir HTTP isteği göndermek ve gelen yanıtı yakalamak için kullanılır.

React uygulamasının oluşturulmasında, projenin ```src``` klasöründeki ```index.js``` dosyası düzenlenerek Fetch API ile JSON veri çekme işlemi yapılabilir. Örneğin, ```index.js``` dosyasında aşağıdaki gibi bir kod bloğu yazılabilir:

```javascriptimport React from 'react';

class App extends React.Component { constructor(props) { super(props);

this.state = { data: null, }; }

componentDidMount() { fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(json => this.setState({ data: json })); }

render() { const { data } = this.state; return (

export default App;```

Burada, ```componentDidMount```de ```fetch``` fonksiyonu ile istek atılır ve gelen yanıt ```response.json()``` ile JSON formatında alınarak, ```setState``` işlemi ile uygulamanın state'ine atanır. Sonrasında ```render``` fonksiyonunda state'deki veriler ul liste şeklinde render edilir.

Böylece, React Fetch API kullanarak JSON veri alma işlemi için bir proje oluşturulması ve Fetch API'nin kullanımı hakkında fikir sahibi olunması sağlanır.

Fetch İsteği Yapma

Fetch API, modern bir API'dir. Veri almak için kullanılan bu API yardımıyla HTTP istekleri yapılabilmektedir. JSON verisi almak için Fetch API kullanmak oldukça kolaydır. İlk olarak, fetch fonksiyonu çağrılır ve istek yapılacak URL belirtilir. Bu istek sonrasında, gelen veri bir promise olarak karşımıza çıkar.

Örnek olarak, bir JSON veri dosyasına istek yapalım. İstek yapmak için öncelikle fetch fonksiyonunda istek yapılacak adres belirtilir. Daha sonra, verilerin JSON formatında olduğunu belirtmek için response.json() fonksiyonu çağrılır. Bu sayede gelen veriler JSON formatı kullanılarak kullanılabilir hale gelir.

fetch('ornek.json')  .then(response => response.json())  .then(data => console.log(data))

Yukarıdaki örnekte, örnek.json dosyasına istek yapılmaktadır. Gelen veri JSON formatında olduğu için response.json() fonksiyonu çağrılarak veriler kullanılabilir hale getirilir. Daha sonra, veriler console.log() fonksiyonu ile konsola yazdırılır.

Bu şekilde Fetch API kullanarak JSON veri isteği yapmak oldukça kolaydır. Alınan verilerin kullanılabilir hale getirilmesi ve gösterilmesi de basit bir şekilde yapılabilir.

JSON Verilerini Gösterme

Gelen JSON verileri, render edilerek belirli bir bileşene atanarak gösterilebilir. Bu bileşen React'ta bir state olarak tanımlanabilir ve veriler state içindeki bir değişkene aktarılabilir. Daha sonra, bu değişken kullanılarak belirli bir tasarım yapısı içinde gösterilebilir.

Örneğin, gelen veriler bir liste şeklinde gösterilmek istenirse, bu liste için HTML

etiketi kullanılabilir ve her bir listenin içeriği yine HTML
• etiketi ile oluşturulabilir. JSON verileriyle ilişkilendirilmiş her bir özellik, bir
• etiketi içinde gösterilebilir.

  Ayrıca, veriler daha karmaşık bir tasarım yapısıyla gösterilebilir. Bu durumda, HTML ve React bileşenleri kullanılarak verilerin gösterilmesi ve düzenlenmesi daha kolay hale getirilebilir. Bir tablo yapısı da kullanılabilir, özellikle JSON verilerinde çeşitli sütunlar varsa. Tablo yapısı, kolayca okunabilir ve verileri karşılaştırmak için uygun olabilir.

  JSON verilerinin gösterimi, hem görsel olarak etkileyici hem de bilgi bakımından açıklayıcı olmalıdır. Bu nedenle, verilerin gösteriminde kullanılan yapı, kullanıcının kolayca anlaması ve işlemesi için tasarlanmış olmalıdır. Bu yapılar, React'in state ve props yapısı kullanılarak kolayca oluşturulabilir.