ReactJS API Veri Çekme

ReactJS API’den veri çekmenin nasıl yapılacağını bilmiyor olabilirsiniz. Bu yazımızda “axios” kullanarak ReactJS projemize API’den veri çekeceğiz. Ve bunu ekrana yazdıracağız.

Öncelikle standart bir React projesi oluşturmamız gerekiyor. Bunun için terminalimize gidip aşağıdaki kodları yazıyoruz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">npx create-react-app vericekme

Eğer “create-react-app” bulunamadı hatası verirse npm paket yükleyicisi kullanarak ilgili modülü yükleyin.

“vericekme” isimli bir klasör oluşturduk. Klasörün içine girmek için

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">cd vericekme

kodunu terminalimize yazıyoruz. Daha sonra projeyi aşağıdaki kodla çalıştırıyoruz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">npm start

Localhosta geldiğimizde karşımıza başlangıç React projesi gelmeli.

ReactJS API Veri Çekme

Axios ile API’den Veri Çekme

Buraya kadar projemizi oluşturduk. Şimdi axios kullanarak API’den veri çekeceğiz.

Öncelikle terminalimize gelip aşağıdaki kodları yazmalıyız.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">npm install axios

Böylelikle “axios” modülünü kurmuş oluyoruz.

Daha sonra “app.js” dosyamıza gidiyoruz. Ve aşağıdaki gibi değiştiriyoruz.

<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;">import React, { useEffect } from "react";
import axios from "axios"; 

export default function App() {
  const fetchUsers = () => {
    return axios
      .get("https://randomuser.me/api/?results=50")
      .then((res) => console.log(res.data));
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

Yukarıdaki kodlarımızda API’ye bir GET isteği yolladık. Ve bize gelen “response” yani sonucu konsola yazdırmasını söyledik.

Eğer konsolu açarsanız aşağıdaki resimdeki gibi bir ekranla karşılaşacaksınız.

ReactJS API veri çekme yazımız buraya kadardı. Diğer yazıları okumayı ve yorum bırakmayı unutmayın.

Yorum yapın