Herkese merhaba. Bugünkü yazıda react öğrenmek için tüm temellerini ele alacağım, böylece React ile projeler oluşturmaya başlamak için tam olarak neleri bilmeniz gerektiğini öğreneceksiniz. Öyleyse şimdi başlayalım. Şimdi, başlamadan önce, bu yazı React js hakkında bilinmesi gereken her şeyi ele alamayacağımı söylemek istiyorum. Tüm temel bilgileri kapsayabilir ve React’e başlamak için bilmeniz gereken her şeyi size öğretebilirim.
React Uygulamasını Oluşturma
Ancak React’te verimli bir şekilde programlamak için almanız gereken bazı ileri düzey kavramları ve bazı Zihniyet Değişimini bu videoya sığdıramam, ancak React öğrenmek üzerine bu videoya sığdıramadığım tüm bu ileri düzey konuları kapsayan tam bir kursum var. Visual Studio kodunu tamamen boş bir projeye açtım ve yapmamız gereken ilk şey aslında React eğitimi uygulamamızı oluşturmak. Bunu yapmak için adında büyük harf ve boşluk olmayan bir klasörün içinde olmanız gerekiyor. Klasörümüzün adı React’i x dakikada öğrenin ve adında boşluk yerine tire işareti var. Yani bu bizim için gayet iyi çalışacak. 
Bunu yapmak için, adında büyük harf ve boşluk olmayan bir klasörün içinde olmanız gerekir. Klasörümüzün adı React’i x dakikada öğrenin ve adında boşluk yerine tire işareti var. Yani bu bizim için gayet iyi çalışacak. Yapmamız gereken şey, node v yazarak node’un kurulu olduğundan emin olmak. Eğer bir sürüm görürseniz, bu node’un kurulu olduğu anlamına gelir. Herhangi bir sürüm görmüyorsanız ya da bir hata görüyorsanız, node kurulu değil demektir. Node’un nasıl kurulacağına dair bir videom var, aşağıdaki açıklamada kartlara bağlı, böylece node’u nasıl indireceğinizi anlamak için bunu kontrol edebilirsiniz. Şimdi, node’u indirdikten sonra, çalıştırmanız gereken şey NPM’ye çok benzeyen NPX’tir, ancak bir şey indirmek yerine, aslında sizin için o komutu çalıştıracaktır. Ve biz Create React öğrenmek app komutunu sonunda bir nokta ile çalıştırmak istiyoruz. Esasen bu nokta, uygulamayı içinde oluşturmak için zaten içinde bulunduğumuz klasörü kullan diyor ve Enter’a bastığımızda. Bunun yapacağı şey, başlatmak ve tüm React öğrenmek uygulamamızı oluşturmak olacaktır. Her şeyi indirmek biraz zaman alacak, bu yüzden indirme işlemi bittiğinde size geri döneceğim. Şimdi her şeyi indirmeyi bitirdiğine göre, burada sol tarafta bir sürü yeni dosya ve klasör olduğunu görebilirsiniz. Terminalimizi yukarı kaydırırsak, uygulamamızın içinde kullanabileceğimiz bir sürü komutumuz olduğunu göreceksiniz. Endişelenmeniz gereken başlıca komutlar ise geliştirme ortamımızı başlatmamızı sağlayacak olan NPM Start.
Ve sonra NPM run. Build. Bu, uygulamamızı oluşturacak, tüm dosyalarımızı küçültecek ve bize uygulamamızın bir sunucuya dağıtabileceğimiz ve aslında İnternet üzerinden erişebileceğimiz bir üretim sürümünü verecektir. Yani NPM start for development NPM run build for production aslında bilmeniz gereken tek şey bu. Ayrıca burada sahip olduğumuz dosyalara da bir göz atabiliriz. Node Modules tüm kütüphanelerimizdir. Genel klasörümüzde esasen HTML dosyamız var. Ve bu HTML dosyasının özelliği sadece bir div’e sahip olması, bu da bizim kök dosyamız. Stil sayfaları yok, kod etiketleri yok, kök olan bu tek div dışında hiçbir şey yok. Ve tüm uygulamamız bu kök div’in içine yerleştirilecektir. React öğrenmek , HTML’imizi oluşturacak ve buradaki div’in içine yerleştirecek. Yani HTML’miz bu uygulama için gerçekten çok temel. Uygulamanın ana et ve patatesleri, tüm stil sayfalarımızın, JavaScript test dosyalarımızın ve logolarımızın bulunduğu kaynak klasöründedir. 
Uygulamanızda kaynak dosyalarınızın bir parçası olan her şey bu kaynak klasörünün içinde olacaktır. Bakmak istediğim ana dosyalar, uygulamamızın başladığı yer olan index JS.
Ve bunun yaptığı şey react öğrenmek render demek, yani render demek, burada belirli bir elementte geçirdiğimiz içerik. Gördüğünüz gibi kök öğeyi, yani HTML’imizin içindeki öğeyi alıyoruz ve uygulama bileşenimizin içindeki her şeyi bu kök öğenin içinde oluşturuyoruz. Ve eğer uygulama bileşenimize girersek. Bir React uygulaması oluşturduğunuzda gelen bu temel şablon kodunu işlediğini görebilirsiniz. Şimdi NPM’yi çalıştırarak uygulamamızı başlatalım ve neye benzediğini görelim. Bu biraz zaman alacak, ancak bizim için tarayıcımızda açılacak. Şimdi bu yüklendiğinde, uygulamamızı sağ tarafta görebilirsiniz. Ve eğer bir şeyi değiştirirsek, örneğin, bunu değiştirirsek, learn react demek yerine, learn react today diyeceğiz ve kaydedeceğiz, bizim için otomatik olarak yenilenecek, bu da React’in gerçekten harika bir yönü.
Ancak bizim kullanım durumumuz için, aslında tüm bu bulanık plaka kodunu kaldırmak istiyoruz. Bu yüzden burada sadece null döndüreceğiz. Ve bunu kaydedersek, artık sitede hiçbir şeyin görünmediğini görmelisiniz. Ayrıca CSS ve logo içe aktarımı için bu ekstra kodu kaldırabilir ve bu test dosyasını, tüm bu CSS dosyalarını, logo dosyasını ve ayrıca buranın içinde artık bu hizmet çalışanı koduna, bu CSS dosyasına veya buradaki hizmet çalışanı içe aktarımına ihtiyacımız yok. Bu hizmet çalışanını da buradan kaldırabiliriz. Şimdi bunu kaydedersek, boş uygulamamıza geri döndüğümüzü ve bu uygulamada kullanmayacağımız bir sürü ekstra şeyi kaldırdığımızı görebilirsiniz. Ve bir React öğrenmek uygulamasına başlarken, başlayacağınız ilk yer uygulama bileşeninizdir çünkü bu, tüm uygulamanızın köküdür. Ve bizim uygulamamız için yapacağımız şey gerçekten basit bir yapılacaklar listesi uygulaması oluşturmak.
Yapılacaklar listelerinin oluşturulacak en ilginç şey olmadığını biliyorum, ancak React ile öğrenmeniz gereken her şeyi gerçekten kısa ve öz bir şekilde göstermekte çok başarılılar. Başlamak için, yapmak istediğim ilk şey aslında uygulamamız için HTML yazmak ve uygulama bileşenimizin içinden başlayacağız ve burada biraz HTML döndüreceğiz. Yapabileceğiniz bir hile de parantezler kullanarak her şeyi bu parantezlerin içinde döndürmektir. Daha sonra yeni bir satıra geçerek kodumuzu biraz biçimlendirebiliriz. 
Daha güzel. Yani bu sizin için kısa bir ipucu. Ve yapmak istediğimiz ilk şey. Yapılacaklar listemizi döndürmek istiyoruz. Yani Yapılacaklar listemiz ve bu aslında ayrı bir bileşen olacak. Bu yüzden Yapılacaklar listesi adında bir bileşen oluşturacağız ve bunu burada uygulamamızın içindeki ilk öğe olarak döndüreceğiz. Ve bu normal HTML değil. Gördüğünüz gibi, bu geçerli bir HTML değil, ancak React’in HTML sürümü gibi bir şey olan JSX. Ve diğer bileşenlerin içine yerleştirmenize izin verir. Burada dizinimizde uygulama bileşenimizin gömülü olduğunu görebilirsiniz. Buranın içinde de bir Yapılacaklar Listesi bileşenimiz var. Bunu yeni dosya diyerek oluşturabiliriz. Adını Todo list. JS Ve Visual Studio kodunda yüklü bir eklentim var. Burayı aşağı kaydırırsam, Es seven react öğrenmek redux GraphQL, react native Snippets olarak adlandırılır. Ve bunun bana sağladığı şey aslında sadece RFC yazmak ve Enter’a basmak ve React içinde bizim için bir fonksiyon bileşeni oluşturacak ve ona dosyamızın adı olan To Do List adını verecek. Şimdi burası yerine, Yapılacaklar Listesi bileşenini içe aktarabiliriz ve bunu Todo List’ten içe aktarmak istiyoruz. Böylece bileşenimizi buradan alıyoruz ve örneğin geri dönüşümüzün içinde hello world diyebiliyoruz. Bunu kaydedersek ve uygulamamızı buraya kaydedersek, Hello World’ün göründüğünü görürsünüz çünkü uygulamamızda Yapılacaklar Listesi’ni oluşturuyoruz ve Yapılacaklar Listesi’nde hello world metnini oluşturuyoruz. Şimdi uygulamamızın içinde, yapmak istediğimiz bir sonraki şey yeni bir Yapılacaklar eklemek için girdi koymak. Yani bir girdi koyabiliriz ve bunu burada bir metin türü yapmak istiyoruz ve bunu kapatalım. Kaydedersek hemen bir hata alacağız. Bunun nedeni, iki HTML öğesini ya da bu durumda JSX öğesini bir return’ün içine yan yana koyamamamızdır. Çünkü bu return yalnızca bir şey döndürebilir. Herhangi bir JavaScript fonksiyonu yalnızca bir şey döndürebilir. Ve şu anda iki şey döndürüyoruz: Yapılacaklar listesi ve bir girdi. O halde yapabileceğimiz şey bunu boş bir öğenin içine sarmaktır. Bu boş öğeye fragment adı verilir ve bize tek bir şey döndürmemizi sağlar, bu da aslında döndürmek istediğimiz iki şeyi içeren bu fragmenttir. Şimdi elimizde yapılacaklar listesi metni ve buradaki girdi var. Sırada, sadece birkaç düğme eklemek istiyorum. Bu ilk düğme yapılacaklarımızı eklemek için olacak ve ardından Yapılacaklarımızı temizlemek için ikinci bir düğme istiyoruz. Yani sadece tamamlandı temizle diyeceğiz. 
To dos. Ve son olarak bundan sonra, yapılacak kaç tane işimiz kaldığını söyleyen bir div koyacağız. Yapılacak sıfır şey kaldı diyeceğiz. Şimdi bunu kaydedersek, yapılacakları ekle düğmemizi, tamamlanmış yapılacakları temizlediğimizi ve yapılacak sıfır işimiz kaldığını göreceksiniz.
Bu ismi biraz küçültelim, böylece hepsini tek bir satıra sığdırabiliriz, aynen böyle. Uygulama bileşenimiz için tüm HTML bu kadar, Yapılacaklar’ımızın her biri için tüm HTML yapılacaklar listesi bileşenimizin içine girecek. Ancak buna başlamadan önce, ilk olarak uygulamamız için durumu ayarlamamız gerekiyor. Çünkü React’in çalışma şekli, uygulamanızın içindeki durumu yönetmektir. Ve bu durum değiştiğinde, bizim için bir şeyleri yeniden oluşturur. Ve biz de tüm To Do’larımızı bir state içinde saklamak istiyoruz, böylece bu To Do’ları gerçekten oluşturabiliriz. Eklenen ya da silinen bir To Do’yu her değiştirdiğimizde, aslında tüm bileşen ağacımızı bizim için yeniden oluşturacaktır. Bir fonksiyon bileşeninde state kullanmak için use state kancası denilen şeyi kullanmamız gerekir. Bunu React’ten bu şekilde küme parantezleri içinde içe aktarabiliriz. Ve şimdi use state fonksiyonunu çağırabiliriz ve ona To Dos’umuz için varsayılan durumumuzu iletmek istiyoruz. Varsayılan değer boş bir dizi olacak. Yani uygulamamız ilk yüklendiğinde boş bir To Dos dizisi kullanacağız çünkü açıkçası To Dos’umuz yok. Ve şimdi ayarlamamız gerekiyor. Bunu bir değişkene ayarlamalıyız ki const diyebilelim.
Ve use state ile ilgili ilginç olan şey, aslında bir dizi döndürmesidir, böylece bu diziyi yeniden yapılandırabilir ve sonra onu usetate’e eşit olarak ayarlayabiliriz. Ve ilk eleman tüm To Dos’larımız. İkinci eleman ise To Dos’umuzu güncellememizi sağlayan bir fonksiyon olacak. Ve buna bakmak biraz kafa karıştırıcı. Esasen, bu sadece nesnenin yeniden yapılandırılmasıdır. Eğer nesne yapılandırmayı bilmiyorsanız, nesne yapılandırma üzerine hazırladığım videoya göz atmayı unutmayın. Aşağıdaki kartlarda ve açıklamada bağlantısı var. Ancak esasen buradaki ilk değişken To Dos, yapılacaklar durumumuzun içindeki To Dos’ların her biridir. İkinci değişken ise bu To Dos’ları güncellemek için çağırdığımız fonksiyon. Bunun gerçek verilerle nasıl görüneceğine dair bir örnek göstermek için, bazı varsayılan verileri aktaralım. Sadece bir tane yap diyebiliriz ve burada iki tane de yapabiliriz. Böylece artık uygulamamızın içinde varsayılan olarak Dos’a iki tane var. Ve bunları To Dos’un Dos’a eşit olacağını söyleyerek To Do listemize aktarabiliriz. Ve buna props denir. Esasen uygulama ya da yapılacaklar listesi gibi tüm bileşenlerimiz kendilerine aktarabileceğimiz prop’lara sahip olacaktır.
Ve bunları tıpkı bir HTML öğesine nitelikleri geçirdiğimiz gibi geçiririz. Yani Yapılacaklar listemizde Dos için bir prop’umuz olduğunu ve To Dos değişkenini Dos için bu prop’a geçirmek istediğimizi söylüyoruz. Bunlara farklı isimler verebiliriz. Örneğin bunun adı Yapılacaklar listesi olabilir. Ve tamamen aynı olacaktır. Yapılacaklar listemizde sadece bir Yapılacaklar listesi prop’umuz olur. Yani burası yerine burada Yapılacaklar listesi yazacak. Bizim durumumuzda buna To Dos diyeceğiz çünkü bence çalışması daha kolay. Öyleyse bunu da yapılacaklar olarak değiştirdiğimizden emin olalım. Ve şimdi Yapılacaklar listemizin içinde, bu Yapılacakları gerçekten oluşturabiliriz. Şimdilik sadece yapılacaklar uzunluğu diyelim. Ve bunu burada küme parantezlerinin içine koymamız gerekiyor. Bu da bunun JavaScript kodu olacağını söylüyor. Şimdi, bunu kaydedersek, iki yazdırdığını görebilirsiniz, çünkü bu listede iki To Dos var. Ama açıkçası, sadece Yapılacaklar’ın sayısını yazdırmak o kadar da kullanışlı değil Aslında To Dos’larımızın her birini yazdırmak istiyoruz ve bunu bir döngü içinde gerçekten kolayca yapabiliriz. Yapmak istediğimiz şey aslında mevcut dizimiz üzerinde eşleme yapmak ve gerçek To Dos’larımızın öğelerini döndürmektir. Ve bunu bir to do bileşeni ile yapacağız. Şimdi bu yapılacaklar bileşenini oluşturalım. Ve tabii ki, tüm şablon kodunu oluşturmak için RFC hilesini yapmak istiyoruz. Ve buranın içinde, tıpkı bunun gibi bir to do öğesi geçireceğiz. Şimdi bunu kaydedebilir, yapılacaklar listemize geri dönebilir ve to do’dan to do’yu aynen bu şekilde içe aktarabiliriz. Şimdi aslında burada bir to do öğemiz, to do bileşenimiz var. Ve yapabileceğimiz şey bir dizinin içinde, aslında bunun üzerinde döngü yapabiliriz. 
Böylece To Dos Map diyebiliriz ve yapmak istediğimiz şey tüm To Dos’larımızı eşlemektir. Yani To Dos’larımızın her biri için bir to do öğesi, bir to do bileşeni döndürmek istiyoruz ve To Do’muzu aynen bu şekilde iletmek istiyoruz. Ve sonra yapılacaklarımızın içinde yapabileceğimiz şey, burada yapılacakları aynen bu şekilde yazdırmak istediğimizi söyleyebiliriz. Bunların ikisini de kaydedelim. Ve hemen bir tanesinin yazdırıldığını ve iki tanesinin yazdırıldığını görebilirsiniz. Ama aslında burada küçük bir hata var. Bunu incelersek, konsol setimizde aslında bir hata aldığımızı fark edeceğiz. Diyor ki, Uyarı, bir listedeki her çocuk benzersiz bir anahtar prop’a sahip olmalıdır. Ve bunun söylediği şey, bu To Dos react öğrenmek listesinin bunları nasıl düzgün bir şekilde güncelleyeceğini bilmediğidir. Yapılacaklar dizimiz her değiştiğinde, bu listedeki tüm yapılacakları yeniden oluşturacak. Ama biz sadece değişenleri render etmesini istiyoruz. Bu yüzden burada bir anahtar ayarlayabiliriz. Bizim durumumuzda, benzersiz bir öğe olması gerekiyor. Bu yüzden bunu şu anda benzersiz olan to do ismimize ayarlayabiliriz. Ne zaman bir anahtarınız olsa, bunun benzersiz olduğundan emin olmanız gerekir. Aslında onu kullandığınız dizi için. Bizim durumumuzda, isim benzersiz olacaktır. Şimdi bunu kaydedersek ve üzerine gidip incelersek, gördüğünüz gibi artık bu hatayı almayacağız. Yani bu mükemmel. Ve aslında bu anahtarın yaptığı şey, react’in her seferinde hepsini yeniden oluşturmak yerine yalnızca dizimizin içinde gerçekten değişen bileşenleri yeniden oluşturmasına veya değiştirmesine izin vermektir. Bu gerçekten de verimlilik amaçlıdır. 
Şimdi açıkçası, sadece yapılacaklarımızın adını saklayamayız. Aslında tamamlanıp tamamlanmadığına dair bir nesne saklamamız gerekir. Bir ismin yanı sıra bir kimliğe de sahip olmamız gerekir. Bu yüzden uygulamamızın içinde, bu diziyi bir nesne olarak değiştirelim.
Bir tane ID’miz olacak. Sadece Bir’i yap diyeceğimiz bir adımız olacak. Ve son olarak, Complete adında bir özelliğimiz olacak ve bu özelliği şimdilik False olarak ayarlayacağız. Artık bir ID’si, bir adı ve bir tamamlandı bayrağı olan bir yapılacak işimiz var. Ve sonra Yapılacaklar listemiz yerine, benzersiz olacağı için anahtarımız olarak sadece Yapılacaklar ID’sini kullanabiliriz. Ve Yapılacaklar’ın içine sadece adı yazdırmak istiyoruz. Yani yapılacaklar adı diyebiliriz. Şimdi To Do one’ın gayet iyi göründüğünü söyleyebilirsiniz, ancak açıkçası sadece adın yazdırılmasını istemiyoruz. Aslında tamamlanmış olup olmadığını kontrol etmek için bir onay kutusu istiyoruz. Öyleyse bunu yapmak için tüm kodumuzu ayarlayalım. Öncelikle bir etiketimiz olacak ve bu etiketin içine dövme adını aynen bu şekilde koyacağız, bundan kurtulduğumdan emin olun. Ve sonra buranın içinde, tıpkı bunun gibi bir onay kutusu türü olacak olan girdimize de ihtiyacımız var. Ayrıca burada bir checked özelliği, yani değer ayarlamak istiyoruz. Ve bunu Tamamlandı olarak ayarlamak istiyoruz. Ve şimdi görebileceğiniz gibi, burada onay kutumuzla yapmamız gerekenler var. Buraya gelip Complete değerimizi True olarak değiştirirsek, onay kutumuzu bizim için işaretleyeceğini görebilirsiniz. Ve eğer yanlış olarak değiştirirsek, açıkçası işaretlenmeyecektir. Şimdi yapmamız gereken şey, aslında dos’a ekleyebilmemiz için olayları ayarlamaktır. Bu yüzden şimdilik bu varsayılan to do’yu kaldıralım ve sadece boş bir diziye sahip olalım.
Çünkü varsayılan olarak, uygulamamız başladığında hiç Dos’a sahip olmayacağız. Ancak bu to do’yu Add to do düğmesi ile her eklediğimizde to Dos eklemek istiyoruz. Bu yüzden Yapılacakları ekle butonumuza bir tıklama dinleyicisi kurmamız gerekiyor. Böylece sadece tıklandığında diyebiliriz ve bunu bir fonksiyona eşit olarak ayarlamak isteriz. Bizim durumumuzda Handle Add to do adında bir fonksiyon çağıracağız ve bu fonksiyonu burada oluşturalım. Sadece Function handle add to do diyebiliriz ve bu olay özelliğini alıp bu fonksiyonun içine yerleştirecektir. Yapmamız gereken şey, To Dos’umuzu bir başka To Do’ya ayarlamamız gerekiyor. Yani önceki Yapılacaklar’ımızı almamız, yeni Yapılacaklar’ımızı eklememiz ve ardından Yapılacaklar’ımızı bu Yapılacaklar listesine ayarlamamız gerekiyor. Ancak bir sorunu hemen fark edeceksiniz. 
Bu alanın içindeki isme erişimimiz yok. Bunu yazıp Yapılacakları ekle’ye tıklayabiliriz. Bu fonksiyonu çağıracak. Ancak bu isme erişmemiz gerekiyor. İşte bu noktada useref kancası işe yarıyor.
Yani Useref diyebiliriz ve useref kancası HTML’imizin içindeki öğelere referans vermemizi sağlar. Bizim durumumuzda, girdi yani ref burada bir değişkene eşit olacak diyebiliriz. Bu To Do adını ref olarak adlandıracağız. Ve sonra sadece const to do nameref is equal to useref diyerek bu değişkeni burada oluşturabiliriz. Şimdi bu To Do nameref değişkeninin içindeki bu girdi öğesine erişebileceğiz ve buna erişmek için sadece todo nameref current diyeceğiz, bu da bizim durumumuzda şu anda referans aldığımız öğe olacak, bu girdi. Böylece current value diyebiliriz ve bu da girdimizin değeri olacaktır. Yani sadece ismin buna eşit olacağını söyleyebiliriz. Ve sonra tabii ki ismimiz boş bir dizeye eşitse geri dönmek istiyoruz. Esasen, eğer bir isim yazmazlarsa, sadece geri dönmek istiyoruz, böylece yapacak boş bir şey eklemiyoruz. Ve daha sonra şimdilik, bunun çalıştığından emin olmak için bu adın oturumunu kapatalım. Aynen böyle. Şimdi bu sayfayı inceleyelim, konsolumuza gidelim. Ve bir isim yazarsak, örneğin, sadece Merhaba diyebiliriz. Yapmak için ekle’ye tıklayın. Hi yazdığını görebilirsiniz. Eğer sadece H yazarsak, Yapmak için ekle’ye tıklarsak, H çıktısı alacağız. Yani buradaki değişkenin içinde, girdimizin içinde ne varsa ona erişimimiz var. Muhtemelen yapmak istediğimiz bir diğer şey de To Do ismimizi ref current olarak almak ve buradaki değeri null’a eşitlemek istiyoruz. Bu şekilde, bir şey yazıp Yapılacakları ekle’ye basarsak, girdimizi temizleyecektir. Bizim için bu sadece güzel bir yaşam kalitesi değişikliği. Şimdi yapmamız gereken asıl değişiklik To Dos’umuzu ayarlamak. Yapılacakları Ayarla’nın çalışma şekli, onları ayarlayabileceğiniz iki farklı yol olmasıdır. Sadece bir değer aktarabilirsiniz. Örneğin, boş dizi tüm To Dos’larımızı temizleyecektir. Ya da bir önceki değeri kullanabilirsiniz. Bizim durumumuzda, önceki to dos’umuz. Bu bir fonksiyon çağrısıdır. Yani bize bir önceki To Dos değerini verecek ve bunu değiştirmemize olanak tanıyacak bir işlevdir. Yani şimdi yeni To Dos değerimizin önceki To Dos değerine eşit olacağını söyleyebiliriz. 
Bunu dizimize yaymak istiyoruz ve sonra bu listeye yeni bir Yapılacaklar eklemek istiyoruz. Bu yüzden bizim durumumuz için ona bir ID verelim. İsim değişkenimize eşit olacak bir isim ve false değerinde bir tam değer. Şimdi yapabileceğimiz şey, bunu kaydettiğimizde, bir şey yazıp Yapılacaklar Ekle’ye basmak, bu Yapılacaklar’ı ekleyeceğini görüyorsunuz. Ancak sorun şu ki, her zaman bir ID ile ekleme yapıyoruz. Sayfamızı incelersek, konsolumuzda aynı ID’ye sahip iki anahtarımız olduğunu söyleyen bir hata olduğunu görmemiz gerekir. Bu yüzden yapmamız gereken şey aslında tamamen rastgele ID’ler oluşturmamıza izin verecek bir kütüphane indirmektir. Ve bunun için en iyi kütüphanenin adı UUID’dir. Bu yüzden sadece NPMI UUID diyebiliriz. Bizim için kütüphaneyi indirecek. Ve aslında UUID’yi uygulamamızın içine aktarabiliriz. Yani Uuidv Four from diyebiliriz ve bunu Uuidv Four’dan aynen bu şekilde içe aktarmak istiyoruz. Bu bize erişim sağlayacak. Uuidv four’a, ki bu sadece rastgele bir ID üreten bir fonksiyondur. Şimdi bunu To Dos’a kaydedersek, artık yinelenen anahtarlara sahip olma hatasını almayacağız çünkü ID’lerimiz artık tamamen benzersiz. Ancak sayfamızı her yenilediğimizde bir sorun fark edeceksiniz, artık To Dos’larımız gösterilmiyor. Sayfanın yeniden yüklenmesi sırasında kalıcı olmuyorlar. Ve bu, react act ile düzeltilmesi çok kolay olan bir şeydir, bunları yerel depolamanın içinde saklamak istiyoruz ve yan etki olan şeyleri yapmanın en kolay yolu. Örneğin, her yapılacaklar eklediğimizde, bunu kaydetmek istiyoruz. react’in içinde başka bir kanca olan use effect denilen şeyi kullanabiliriz. Ve bu sadece ilk parametresi olarak başka bir fonksiyon alacak olan bir fonksiyondur.
Ve bu, bir şeyler yapmak istediğimiz fonksiyondur. Yani bir şey her değiştiğinde, bu ilk fonksiyonu çağırmak istiyoruz. Ve bu fonksiyonu ne zaman çağıracağımızı belirlemenin yolu, buraya bir dizi özellik aktarmaktır ve bu dizi tüm bağımlılıklarımız olacaktır. 
Ve bu, işleri yapmak istediğimiz işlevdir. Yani bir şey her değiştiğinde, bu ilk fonksiyonu çağırmak istiyoruz. Bu fonksiyonun ne zaman çağrılacağını belirlemenin yolu ise buraya bir dizi özellik aktarmak ve bu dizinin tüm bağımlılıklarımızı içermesi. Yani bu dizideki herhangi bir şey değiştiğinde, bu Use effect fonksiyonunu çalıştırmak istiyoruz. Yani bizim durumumuzda, To Dos dizimiz her değiştiğinde, To Dos’umuzu kaydetmek istiyoruz. Ve bunları kaydetmek gerçekten çok kolay. Onları sadece yerel depolama alanına kaydedeceğiz. Yani yerel depolama setItem diyebiliriz. Bu öğeye burada bir anahtar vermemiz gerekiyor. Bunun için bir değişken oluşturalım. Buna yerel depolama anahtarı diyeceğiz. Ve bunu do to do app to Dos olarak ayarlayacağız. Aynen böyle. Bu anahtarı istediğiniz gibi adlandırabilirsiniz. Gerçekten fark etmez. Bu yüzden önce anahtarı geçiriyoruz ve sonra bir dize geçirdiğimizden emin olmak istiyoruz. Bu yüzden To Dos’umuzu stringify edeceğiz. Yani bu sadece yapılacaklar uygulamamızın bir JSON dizesi. İşte oldu. Şimdi bir yapılacak eklediğimizde, başka bir yapılacak eklediğimizde, aslında bunları yerel depolama alanımıza kaydediyor. Ama tabii ki, yenilediğimizde. Görünmüyorlar. Bunun nedeni başka bir efekt kullanmamız gerekmesi. Ve bu efekti Dos’a yüklemek için çağıracağız. Ve bunu yalnızca bileşenimiz yüklendiğinde bir kez çağırmak istiyoruz. Yani boş bir bağımlılık dizisi geçersek bu fonksiyonu bir kez çağıracaktır. Ve boş dizi asla değişmediği için bu kullanım etkisini asla hatırlamayacaktır. Ve bu kullanım etkisi, to dos’umuzu stored to dos’umuzdan geri aldığımıza ayarlamak istiyoruz, böylece const stored to dos’un yerel depolama anahtarının yerel depolama get öğesine eşit olacağını söyleyebiliriz ve bu öğeyi stored to dos’umuza kaydettiğimizden emin olmak istiyoruz. Ve sonra to dos’umuzu bu stored to dos’a sadece gerçekten stored to dos’umuz varsa ayarlamak istiyoruz. Yani eğer Dos’a depoladıysak, o zaman dos’a depoladığımız öğeyi dos’a ayarlayacağız. Şimdi bunu kaydedersem, bir hata aldığımızı göreceksiniz ve bunun nedeni bunun bir dize olmasıdır. 
Bunu JSON kullanarak ayrıştırmamız gerekiyor, bu yüzden sadece bu dizenin JSON ayrıştırması diyebiliriz, bu onu bir diziye dönüştürecektir. Ve şimdi bunu kaydedersek, bunun düzgün çalıştığını görebilirsiniz. Şimdi Dos’a biraz ekleyelim. FFF AAA diyeceğiz ve bunları Dos’a yenilediğimizde hala uygulamamızın içinde görünüyorlar. Böylece hem depolamanın hem de Dos’a almanın düzgün çalıştığını biliyoruz. Artık uygulamamızda yerleşik olarak kaydetme özelliğine sahibiz ve sadece birkaç satırlık bir kodla bu özelliği kullanabiliyoruz. Şimdi bunların hepsi harika ama şu anda to Dos’umuzu değiştirmenin bir yolu yok. Bu onay kutusuna tıklasak bile, aslında bizim için yapılacakları kontrol etmeyecek. Yapılacaklarımızın tamamlanmamıştan tamamlanmışa ya da tam tersine değişimini saklamak için bazı tepki kodları yazmamız gerekiyor. Bu yüzden buraya gelip toggle to do adında bir fonksiyon yazalım ve bu fonksiyon sadece değiştirmek istediğimiz to do’nun ID’sini alacaktır. Ve sonra yapmak istediğimiz şey listemizden yapılacaklar arasında geçiş yapmak. Bu yüzden yapmak istediğimiz ilk şey yeni bir yapılacaklar listesi almak. Buna yeni Yapılacaklar diyeceğiz ve mevcut Yapılacaklar listemizin bir kopyasına eşit olacak. Bu sadece mevcut yapılacaklar listemizi değiştirmememiz içindir.
Ve her zaman bir kopya oluşturduğumuzdan emin olmak isteriz. react’te bir durum değişkenini asla doğrudan değiştirmemelisiniz. Değiştirmeden önce her zaman bir kopya oluşturmalı ve ardından yeni durumu ayarlamak için bu kopyayı kullanmalısınız. Böylece kopyamızı oluşturduk. Şimdi aslında değiştirmeye çalıştığımız şeyi elde etmek istiyoruz. Bunu yeni To Dos’umuzdan, toggle To Do’ya aktardığımız ID’ye eşit olan to do ID’sine sahip bir to do bularak elde edebiliriz. Ancak bu fonksiyonu kullanmamızın bir yolu yok çünkü hatırladığınız gibi To Dos’larımız, uygulamamızın içinde referans verilen to do listemizin içinde referans verilen bu to do bileşeninin içinde saklanıyor.
Dolayısıyla bu fonksiyonu yapılacaklar listemize aktarmamız gerekiyor, böylece yapılacaklar için toggle to do eşit olacak diyebiliriz. Daha sonra listemizin içinde, toggle to do prop’u içe aktarabilir ve tıpkı bunun gibi ayrı ayrı To Dos’a aktarabiliriz. Yani şimdi hem to do hem de toggle to do fonksiyonunu geçiriyoruz. Ve son olarak, to do’muzun içinde toggle to do fonksiyonumuz var. Ve girdimizde, buraya gelebiliriz ve değişimde bir fonksiyon çağırmak istediğimizi söylemek istiyoruz. Ve bu fonksiyon bizim toggle to do fonksiyonumuz olmayacak çünkü bir ID geçirdiğimizden emin olmamız gerekiyor. Dolayısıyla, tıklama yapmak için bu tanıtıcıyı çağıracağımızı söyleyeceğiz ve ardından tıklama yapmak için tanıtıcı olan bu işlevi oluşturacağız. Ve bu fonksiyonun içinde tek yapmamız gereken toggle to do’yu çağırmak ve to do ID’mizi ona iletmek. Şimdi, eğer bunu kaydedersek. Ve sadece kontrole tıklarsak. Kutumuzu bizim için kontrol ettiğini görebilirsiniz. Aynı şey A için de geçerli. Yenilersek, tüm durumu To Dos’umuzun içinde, yerel depolamanın içinde sakladığını görürsünüz. Ve bunun çalışma şekli biraz kafa karıştırıcı, olan şey her tıkladığımızda bunu değişiklikte çağırıyor, bu da Yapılacaklar fikriyle yapmak için geçiş işlevimizi çağırıyor. Biz bunun içindeyiz, bu da Yapılacaklar listesi aracılığıyla uygulamamıza aktarılıyor, bu da Yapılacaklar listesi değişkenimizi tıkladığımız yapılacaklar işaretli yeni Yapılacaklar listesine sıfırlayan buradaki Yapılacakları değiştir işlevini çağırıyor. Artık Yapılacaklar’ımızı nasıl değiştirip açacağımızı bildiğimize göre, buradaki metnin kaç tane Yapılacak’ın işaretli olmadığını göstermesini sağlayalım. Bunu yapmak oldukça basittir. Sadece To Dos filtresi diyebiliriz ve işaretli olmayanların tümünü filtrelemek isteriz. 
Bu şekilde tamamlanmamış olan to do diyebiliriz. Ve sadece tamamlanmamış to Dos’un uzunluğunu almak istiyoruz. Şimdi, eğer bunu söylersek, bir tane yapılacak işimiz kaldığını görebilirsiniz. Bunu işaretlersek, sıfıra iner. İkisinin de işaretini kaldırıyoruz. Yapılacak iki iş kaldı diyor ve böyle devam ediyor. Ve eğer yeni bir Yapılacak eklersek, üçe çıkacak, ki bu harika bir şey. Şimdi temizle tamamlandı için Click olay dinleyicisini ayarlayalım. Sadece tıklandığında gelebiliriz. Clear to Dos’u işlemek istiyoruz ve bu fonksiyonu oluşturabiliriz. Bunu tam burada yapalım. Ve bunun yapacağı şey, To Dos’umuzu, tamamlanmış olanlardan hiçbirini içermeyen yeni listeye ayarlamak olacaktır. Tekrar, yeni To Dos adında bir değişken oluşturalım. Ve bu, mevcut To Dos filtremize eşit olacak. Ve tamamlanmamış tüm To Dos’ları filtrelemek istiyoruz. Yani yapılacaklar tamamlandı diyebiliriz. Bu, tamamlanmamış tüm To Dos’larımız olacak. Ve Yapılacaklar’ımızı bu şekilde yeni Yapılacaklar olarak ayarlamak istiyoruz. Ve şimdi Tamamlananları temizle’ye tıklarsak, işaretlediğimiz her şeyin bu şekilde temizlendiğini görebilirsiniz.
