Notlar Uygulaması Yapımı

Hazırlayan:Mehmet Furkan Güneş-22430070005

Projede React kullanarak tek sayfalı uygulama olan (SPA) yöntemi ile Notlar Uygulaması yapacağım.

Projemi React kullanarak içine Not kaydedip daha sonra istediğinizde silebileceğiniz bir notlar uygulaması oluşturacağım.

npx create-react-app react-notes-app

Bu şekilde projeyi oluşturulduktan sonra, src içine components adında bir klasör oluşturup içine NotesList.js, AddNote.js, Header.js, Note.js, Search.js adında dosyalar oluşturuyoruz. App.js dosyamızda useState() hook ile Local storage içine notlarımızı kaydediyoruz.

Öncelikle, NotesList.js dosyasında uygulamanın ana sayfasında görüntülenecek notların listesini oluşturuyoruz. Bu component, "notes" adında bir props alacak ve içinde notları haritalayarak ekrana yazdıracak. Ayrıca, bu component, not silmek için kullanılan bir fonksiyon olan "handleDeleteNote" adında bir props da alacak.

AddNote.js dosyasında ise yeni notların oluşturulduğu bileşenimizi oluşturuyoruz. Bu component, "handleAddNote" adında bir props alacak ve not eklemek için kullanılacak fonksiyonu çağıracak.

Header.js dosyasında uygulamanın başlığını ve herhangi bir tema değiştirme işlemi için bir switch butonu oluşturuyoruz. Bu component, "handleToggleDarkMode" adında bir props alacak ve temayı değiştirmek için kullanılacak fonksiyonu çağıracak.

Note.js dosyasında, tek bir notu görüntüleyen bir bileşen oluşturuyoruz. Bu bileşen, notun başlığını ve metnini içerecek ve ayrıca notun silinmesi için bir düğme içerecek.

Search.js dosyasında, kullanıcının notlar arasında arama yapabileceği bir bileşenimizi oluşturuyoruz. Bu component, "handleSearchNote" adında bir props alacak ve notların aranması için kullanılacak fonksiyonu çağıracak.

Tüm bu component'leri App.js dosyasında kullanarak, bir Notlar uygulaması oluşturmuş olacağız. Bu uygulama, kullanıcının notlar eklemesine, silmesine ve aramasına olanak tanıyacak ve eklenen notlar Local Storage içinde saklanacak.