React, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bu yazıda, React kullanarak nasıl basit bir "ToDo Listesi" yapılacağını anlatacağız. Adım adım ilerleyerek, yeni görevler ekleyebilen ve listeyi güncelleyebilen bir uygulama geliştireceğiz.

Başlangıç

Öncelikle, React projesi oluşturduğunuzu varsayıyoruz. Eğer yoksa npx create-react-app todo-app komutu ile yeni bir proje başlatabilirsiniz.

ToDo Listesi Bileşeni Oluşturma

Temel olarak, listeyi yönetmek için bir useState kancası kullanacağız. Kullanıcıdan alınan metni listeye ekleyip, ekranda göstereceğiz.

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  // Yeni görev ekleme fonksiyonu
  const addTask = () => {
    if (input.trim() !== '') {
      setTasks([...tasks, input.trim()]);
      setInput('');
    }
  };

  // Enter tuşu ile ekleme
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      addTask();
    }
  };

  return (
    <div>
      <h2>ToDo Listesi</h2>
      <input
        type="text"
        value={input}
        onChange={e => setInput(e.target.value)}
        onKeyPress={handleKeyPress}
        placeholder="Yeni görev ekle"
      />
      <button onClick={addTask}>Ekle</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Kodun Detaylı Açıklaması

• useState Hook'u: İki ayrı state kullanıyoruz, tasks mevcut görevleri tutuyor, input ise text input değerini saklıyor.
• addTask Fonksiyonu: Boş olmayan metni alır, tasks dizisine ekler ve inputu temizler.
• handleKeyPress: Kullanıcı Enter tuşuna bastığında aynı addTask fonksiyonunu çağırır.
• Render: Input ve buton ile kullanıcı görev ekler. Liste tasks.map() ile dinamik olarak görüntülenir.

Sonuç

Bu temel örnek ile React'te state yönetimi ve kullanıcı girişini nasıl işleyebileceğinizi gösterdik. İsterseniz bu yapıyı geliştirip, görevleri silme veya tamamlama özellikleri ekleyebilirsiniz.

Kolay kodlamalar!