React To-do Uygulaması API ile Görevleri Listeleme #2

Merhaba arkadaşlar, bu yazımda sizlere React To-do Uygulaması API ile Görevleri Listeleme konusundan bahsedeceğim.

Bu adımda, React uygulamamızı bir API ile entegre ederek veri alışverişini gerçekleştireceğiz. API kullanarak yapılacakları listeleyeceğiz.

1. API’ye Bağlantı Kurma:
   İlk adımda oluşturduğumuz React projesini kullanarak API’ye bağlantı kuracağız. Öncelikle, fetch fonksiyonunu kullanarak API ile iletişim kuracağız. API’den veri almak için fetch fonksiyonunu kullanırken, yeni görev eklemek, tamamlanmış görevleri işaretlemek ve görevleri silmek için farklı HTTP yöntemlerini kullanacağız.
2. Yapılacakları Listeleme:
   React bileşenlerinin durumunu kullanarak, API’den yapılacakları getireceğiz. İlk olarak, bileşenin useState kancasını kullanarak bir todos durumu oluşturacağız ve başlangıçta boş bir dizi olarak ayarlayacağız. Ardından, bileşenin useEffect kancasını kullanarak bileşenin yüklendiği anda API’den yapılacakları getireceğiz ve todos durumunu güncelleyeceğiz.

TodoList Componentini Oluşturma:

İlk olarak, görevleri listeleyeceğimiz bir TodoList componentini oluşturacağız. Bu component, görevlerin bir listesini alacak ve her bir görevi render edecek.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function TodoList() {
  const [todos, setTodos] = useState([]);

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

  const fetchTodos = async () => {
    try {
      const response = await axios.get('http://localhost:5065/api/todos');
      setTodos(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default TodoList;

Yukarıdaki kodda, TodoList bileşeninde todos adında bir state ve setter’ı tanımlıyoruz. Başlangıçta, todos dizisini boş bir diziyle başlatıyoruz.

useEffect özelliğini kullanarak bileşen yüklendiğinde fetchTodos fonksiyonunu çağırıyoruz. Bu fonksiyon, axios GET isteği ile API’den görevleri getirir ve setTodos aracılığıyla todos state’ini günceller.

Görevleri listelemek için todos.map metodunu kullanıyoruz ve her bir görevi bir <li> öğesi içinde render ediyoruz.

fetchTodos fonksiyonu async olarak işaretlenmiştir ve axios kütüphanesini kullanarak GET isteği gönderir. Başarılı bir yanıt aldığımızda, response.data ile gelen verileri todos state’ine atarız. Hata durumunda, hatayı konsola yazdırırız.

Adım 2: App Componentini Güncelleme:

import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <h1>React To-do Uygulaması</h1>
      <TodoList />
    </div>
  );
}

export default App;

Yukarıdaki kodda, App componentimizi güncelledik ve TodoList componentini çağırdık. Artık TodoList componenti API‘den görevleri alacak ve kullanıcıya listeleyecektir.

Adım 3: Sonuçları Görüntüleme:

Tarayıcıda uygulamayı başlatın ve görevlerin listelendiğini göreceksiniz. TodoList bileşeni, todos dizisini alır ve her bir görevi bir liste öğesi olarak render eder.

Artık React to-do uygulamasında görevleri listeleyebiliyoruz.

Bu yazıda, React to-do uygulamasında görevleri listeleme adımını öğrendik. TodoList bileşeni oluşturarak ve App bileşeninde kullanarak görevleri listeleyebiliriz. Bir sonraki adımda, görev eklemeyi öğreneceğiz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…