React öğrenmek ve anlamak - uygulama rehberi

Burada ele alınacak konular tanıtılacak ve bu dersin nedenleri üzerinde durulacak.

Artık JavaScript için sayısız UI çerçevesi var - neden React olmalı? Bu kütüphanenin tartışmasız popülaritesinin yanı sıra, React'i tercih etmenin bazı daha derin nedenleri de var.

Bu dersde geliştirme ortamını kuruyoruz ve npm create vite komutuyla ilk React uygulamamızı hızlıca oluşturuyoruz.

Son dersimizde bir "taze" React uygulaması oluşturduktan sonra, bu uygulamanın yapısını anlamak ve React'in bir web sitesine nasıl entegre edilebileceğini açıklamak için buradayız.

var ile let/const arasında küçük bir tazeleyici.

Destructuring, nesnelerden ve dizilerden öğelerin hedefli olarak çıkarılmasını sağlar. Dikkatli bir şekilde bakıldığında, JavaScript kodunu daha zarif ve daha kompakt hale getiren birçok kullanım imkanı ortaya çıkar.

Fonksiyonlar JS'de temel ve şu ana kadar yalnızca function anahtar kelimesiyle bildirilip tanımlanmıştır. ES6, kodu daha okunabilir hale getiren ve this ile ilgili sıkıntılı bir soruna çözüm sunan zarif ve kısa bir yazım biçimi getirir.

NodeJs'de modüller başlangıçtan beri kullanılmıştır, ancak başlangıçta yalnızca CommonJs modül formatı olan require kullanılmıştır. ES6'dan itibaren standart bir modül tanımı var ve yeni anahtar kelimeler import/export kullanılabilir hale gelmiştir. Bu format şu anda neredeyse tüm (yeni) JS kütüphanelerinde desteklenmekte ve NodeJs de en yeni sürümlerinde bunu kullanabilmektedir.

JSX ile bir bileşenin kullanıcı arayüzünü tanımlarsınız ve içine JS ifadeleri entegre edersiniz. Videoya ilişkin proje dosyası bu öğretici bölümünün tamamlanmış kodunu içerir.

Kendi React bileşenlerini, JSX döndüren işlevler kullanarak çok kolay bir şekilde yazabilirsiniz.

Bu ders, verilerin ve JavaScript ifadelerinin JSX'e nasıl entegre edileceğini açıklar.

Bir değişebilir durum olmadan, anlamlı bir uygulama uygulamak pek mümkün değildir. React'te genellikle buna useState kullanılır. Bu ders, bu Hook'u tanıtır ve kullanımını açıklar.

Props, verilerin Çocuk Bileşenlere iletilmesinde kullanılır. Burada, bunun nasıl gerçekleştiği ve nelere dikkat edilmesi gerektiği açıklanmaktadır.

Özellikler dinamik olarak değiştiğinde, bileşenin ilgili render işlevi tekrar çağrılır.

Burada, yapılacaklar listesi uygulamasının nasıl oluşturulacağı açıklanmaktadır. Videonun altında, bu öğretici bölüm için tamamlanmış kod içeren bir proje dosyası bulunmaktadır.

Bir alt bileşenin ana bileşene bir şey bildirmek istediğinde, bunu bir geri çağrı özelliği üzerinden yapabilir.

Görevlerin bir gün tamamlanması gerekiyor. Burada bunun kod içinde nasıl çalıştığını tartışıyoruz.

Bir UI'nin görünümü şüphesiz önemlidir. Bu yüzden Emotion kütüphanesi kullanılarak bunun nasıl yapıldığını ve Prop className'in nasıl kullanılabileceğini burada açıklıyorum. Ayrıca her bir öğeyi ayrı ayrı detaylandırmak için kullanılan style- özniteliği de ele alınmaktadır.

Görev dizisini filtreleyerek yapılacaklar iki gruba ayrılabilir.

Tabii ki To-dos silinebilmelidir. Burada, bunun nasıl Dizi-Filtreleme ile yapıldığı açıklanmaktadır.

Daha önce componentleri her zaman DIV'lerin içine "wrap" yapıyorduk. Ancak bazı durumlarda bunu da yapmaya gerek olmayabilir.

Şimdi ilginç hale geliyor: To-dos tarayıcı belleğinde oldukça kolay bir şekilde kalıcı olarak saklanabilir ve tabii ki tekrar yüklenebilir, böylece sayfanın yeniden yüklenmesini "hayatta kalabilirler".

useEffect ile yan etkiler entegre edilebilir. Bu işlev, bir bileşenin monte edilmesini de ele alabilir.

Görev uygulamamızla ilgili kısa bir özet ve son düzenlemeler.

Video oynatıcı uygulaması create vite ile oluşturulur ve uygulamanın nasıl yapılandırılması gerektiği açıklanır. Videoya eklenen proje dosyası, video oynatıcı için hazır kodu içerir.

ref özniteliği kullanılarak DOM öğelerine başvurulabilir ve useRef ile bu öğelere erişilebilir. Burada bu işlemi video öğesi ile yapıyoruz.

Asıl video oynatıcıyı oluşturuyoruz, zaten Oynat, Duraklat ve Dur butonlarına sahip.

Oynatma ve duraklatma aynı anda ihtiyaç duyulmadığı için bu ikisini bir düğmede bir araya getiriyoruz.

Video öğesinin kendi kontrolleri de videoyu kontrol eder, ancak bu durum oynat / duraklat düğmesinde durumumuzun uygun şekilde güncellenmemesine neden olur. Bu sorunu video öğesindeki Olay İşleyicileri kullanarak çözeceğiz.

Sesi kendi düğmesiyle değiştirebiliriz.

Video içinde herhangi bir konuma (Seek) atlamak, currentTime özelliğini ayarlayarak şaşırtıcı derecede kolay bir şekilde gerçekleştirilebilir.

Video uzunluğu, video meta verilerinin yüklenmesinden sonra belirlenir, bu nedenle doğru etkinliği beklememiz gerekiyor.

Çalma listesi, select HTML öğesiyle uygulanabilen bir liste ile gerçekleştirilir.

src- özniteliğinin değişimine yanıt vermek ve Video Oynatıcının durumunu sıfırlamak için burada useEffect kullanıyoruz.

Çalma listesi sabit girişlerden bir diziye dönüştürülüyor.

Şimdi video listesinin düzenlenmesi devreye giriyor: Video girişlerinin eklenmesini ekliyoruz.

Eklediğimiz şeyi silebilmeliyiz. Bunun için To-do uygulamasında olduğu gibi filtreleme yapıyoruz.

Çalma listesi sadece bir "yer işareti listesi" olarak değil, aynı zamanda videoları otomatik olarak birbiri ardına oynatmak için de kullanılmalıdır. Bu, bu ders aracılığıyla gerçekleştirilir.

Sabırsız olanlar için: Bir sonraki ve bir önceki video için düğmeler.

İlk ve son video için özel bir işlem uygulanacak: Next ve Previous düğmeleri uygun şekilde devre dışı bırakılmalıdır.

Şimdi çalma listemizi kaydedip yüklüyoruz. Bu işlem, tarayıcının yerel depolama alanında To-do-uygulamasına benzer şekilde gerçekleşmektedir.

Video Oynatıcı Uygulamasında kullanılan örnek videoları orijinal halleriyle buradan izleyebilirsiniz (tüm CC-Attribution-Lisansı, ilgili web sitelerine bakınız):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

useJsonFetch-Hooks örneği üzerinden, kendi Hook fonksiyonlarını nasıl yazabileceğiniz açıklanmaktadır.

useStateın Setter'ı ile durum değişikliği yapmak zor olabilir. Ancak useImmer ile artık bu bir sorun değil.

Arayüz, gereksiz Render işlemleri gerçekleşmediğinde daha hızlı oluşturulur ve kullanıcı girişlerine daha hızlı yanıt verir. memo sayesinde bileşenler, özellikleri değişmedikçe yeniden oluşturulmaktan kaçınırlar.

useCallback kullanarak, Callback-Props kullanıldığında çocuk bileşenlerin gereksiz olarak yeniden render edilmesi engellenebilir.

Rendere işlevleri içinde karmaşık hesaplamalar sadece gerekli olduğunda yapılmalıdır. Bağımlılıklar göz önünde bulundurularak, bu hesaplamaların sonuçlarını önbelleğe almak için useMemo kullanılabilir.

Bu dersin sonuçlarını özetliyor ve katılımcıların kurs sonrasında neyi incelemeleri gerektiğine dair ipuçları veriyorum.