Yapılacaklar Listesi

Hazırlayan:Nihal Kemer-22430070004

Projede React kullanarak tek sayfalı uygulama olan (SPA) yöntemi ile Yapılacaklar Listesi uygulaması yapacağım.

Projemi React kullanarak içine yapılması gereken işleri kaydedebileceğimiz veya silebileceğimiz bir yapılacaklar listesi oluşturdum.

npx create-react-app react-todo-app

"App.js" uygulamamızın ana bileşenidir.

Uygulama, "newItem" ve "items" adında iki adet state değişkeni kullanmaktadır. "newItem", input alanına girilen yeni yapılacak öğesini temsil ederken, "items" ise yapılacak öğelerin bir listesini tutar.

İki adet "useEffect" kancası kullanılmıştır. İlk "useEffect" kancası, bileşenin ilk render edildiğinde localStorage'dan öğeleri alır ve "items" state'ine atanır. Böylece sayfa yenilendikten sonra bile öğelerin kaybolmasını önlemiş olursunuz. İkinci "useEffect" kancası ise "items" state'inde herhangi bir değişiklik olduğunda, bu öğeleri localStorage'a kaydeder.

"addItem" fonksiyonu, yeni bir öğe eklemek için kullanılır. Eğer "newItem" boş ise, bir uyarı mesajı verilir ve fonksiyon sonlandırılır. Aksi halde, rastgele bir id oluşturulup "newItem"'ı içeren bir öğe oluşturulur ve "items" listesine eklenir. Daha sonra "newItem" sıfırlanır.

"deleteItem" fonksiyonu, bir öğeyi listeden kaldırmak için kullanılır. "filter" fonksiyonu kullanılarak seçilen öğe hariç diğer öğelerden oluşan yeni bir dizi oluşturulur ve "items" state'ine atanır.

"completeItem" fonksiyonu, bir öğenin tamamlandı olarak işaretlenip işaretlenmediğini değiştirmek için kullanılır. "map" fonksiyonu kullanılarak "items" listesi üzerinde dolaşılır. Eğer öğe belirtilen id'ye sahipse, "completed" özelliği tersine çevrilerek öğenin tamamlanma durumu güncellenir. Sonuçta oluşan yeni dizi, "items" state'ine atanır.

Görüntülenen bileşen içinde bir form, bir input alanı ve bir liste bulunur. Yeni öğe eklemek için form kullanılır. Input alanına girilen değer "newItem" state'ine atanır ve form gönderildiğinde "addItem" fonksiyonu çalıştırılır.

Öğeleri listelemek için "map" fonksiyonu kullanılır. Her öğe için bir "<li>" bileşeni oluşturulur ve öğenin id, tamamlanma durumu ve değeri gösterilir. Tamamlanma durumuna göre "<li>" bileşenine bir CSS sınıfı eklenir. Her öğe için bir "✎" ve "X" butonu bulunur. "✎" butonuna tıklandığında "completeItem" fonksiyonu çalışır ve öğenin tamamlanma durumu güncellenir. "X" butonuna tıklandığında "deleteItem" fonksiyonu çalışır ve öğe listeden kaldırılır.

Bu şekilde, yapılacaklar listesine yeni öğeler ekleyebilir, öğeleri tamamlayabilir ve öğeleri silebilirsiniz. Uygulama, "localStorage" kullanarak öğelerin kaydedilmesini sağlar, bu sayede sayfa yenilendiğinde bile öğeleriniz kaybolmaz.