Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan React kütüphanesinin çeşitli hook'larını ve özelliklerini anlatan kapsamlı bir eğitim içeriğidir.
- Video, React'teki çeşitli hook'ların (useEffect, useRef, useState, useMemo, useCallback ve React.memo) kullanımını adım adım göstermektedir. İçerik, hook'ların temel işlevselliğinden başlayarak, performans optimizasyonu, veri çekme işlemleri ve routing yapısı oluşturma konularına kadar uzanmaktadır. Eğitmen, her bir hook'un nasıl kullanılacağını ve hangi durumlarda tercih edilmesi gerektiğini pratik kod örnekleriyle açıklamaktadır.
- Video ayrıca fake store API'si üzerinden veri çekme işlemleri, axios ve fetch ile HTTP istekleri yapma, Redux Toolkit kullanımı ve React uygulamalarında performans optimizasyonu konularını da kapsamaktadır. useRef ile input'a focus verme, useMemo ile büyük verilerin önbelleğe alınması ve useCallback ile fonksiyonların performansı artırmak için nasıl kullanılabileceği gibi pratik uygulamalar da gösterilmektedir.
- 00:00Asenkron Veri Çağrısı Yapma
- JavaScript ile verileri beklemeli bir şekilde çağırmak gerekiyor, aksi takdirde hata alınır veya veriler ekranda görüntülenemez.
- Asenkron fonksiyonlar için "async" anahtar kelimesi kullanılır ve Axios kütüphanesi ile API'ye GET isteği gönderilir.
- Verileri bir state içerisinde tutmak için "useState" hook'u kullanılır ve veriler bu state'e atanır.
- 03:58Loading Durumu Ekleme
- Veri yüklenirken loading durumu eklemek için bir state oluşturulur ve başlangıçta true değerine sahip olur.
- Veri yüklendikten sonra set loading(false) ile loading durumu kapatılır.
- Loading durumuna göre ekranda farklı içerikler gösterilebilir: loading true ise "Loading" mesajı, false ise veriler gösterilir.
- 05:15Verileri Ekranda Gösterme
- Veriler map() fonksiyonu ile ekranda gösterilir ve her veri için bir div oluşturulur.
- Verilerin kategorisi, title ve resim gibi özellikleri div içinde gösterilir.
- Resimlere CSS ile stil verilerek boyutlandırılır ve aralarına boşluk eklenir.
- 07:34Detay Sayfasına Yönlendirme
- Ürünlerin üzerine tıklandığında detay sayfasına yönlendirme için onClick olayı kullanılır.
- Navigate fonksiyonu ile detay sayfasına gidilir ve ürünün ID'si parametre olarak gönderilir.
- Detay sayfasında gelen ID'ye göre veri çekme işlemi yapılır.
- 09:35Detay Sayfasında Veri Gösterme
- Detay sayfasında gelen ID'ye göre Axios ile API isteği yapılır.
- Detay sayfasında tek bir veri olduğu için loading durumu gerekli değildir.
- Detay sayfasında gelen verilerin title ve resim özellikleri ekranda gösterilir.
- 12:32Redux ve State Management
- Redux, React için genel bir state management çözümüdür ve önemli bir konudur.
- Redux, bir state'i farklı bileşenler arasında paylaşmayı sağlar, örneğin Home bileşenindeki bir state'i Detail bileşeninde kullanmayı mümkün kılar.
- State'i her sayfada kullanmak için, bunu ayrı bir yerde tutup gerektiğinde her sayfada çağırmanın daha sağlıklı bir yaklaşımdır.
- 14:26Redux Kurulumu
- Redux'ı kullanabilmek için "react-redux" ve "redux-toolkit" paketlerinin kurulması gerekir.
- Redux kurulumu için "store.js" adında bir dosya oluşturulmalıdır.
- Tüm sayfada state'leri kullanabilmek için "Provider" bileşeni ile uygulama sarmalanmalıdır.
- 16:47Redux Kullanım Hazırlığı
- Provider ile sarmalama yapıldıktan sonra reducer'lar ve diğer ayarlar yapılmadan hata alınabilir.
- Örnek uygulamada ana sayfada gereksiz kodlar kaldırılarak sadece "HomePage" bırakılmıştır.
- Veri çekme işlemlerinde bu sayfa özelleştirilecektir.
- 17:47Redux ile True/False Durum Yönetimi
- Redux üzerinde true/false durumunu yönetmek için bir state oluşturup, click yapıldığında true, tekrar click yapıldığında false olmasını sağlayabiliriz.
- Model slice adında bir yapı oluşturup, model adında bir state ile başlangıç değeri false olarak ayarlanabilir.
- Open function adında bir fonksiyon oluşturulup, state model true ise false, false ise true olarak değiştirilebilir.
- 20:21Redux State'ini Kullanma
- Home sayfasında useSelector ile Redux'taki state'ler çağrılabilir ve konsola yazdırılabilir.
- Click olayında dispatch kullanılarak Redux'taki fonksiyonlar çağrılabilir ve state değeri değiştirilebilir.
- Redux ile oluşturulan state'ler tüm sayfalarda çağrılabilir, ancak sayfa bazında oluşturulan state'ler sadece o sayfada kullanılabilir.
- 23:54Redux ile Veri Çekme
- Redux ile veri çekmek için createAsyncThunk kullanılır ve veri çekme fonksiyonu oluşturulabilir.
- FetchData fonksiyonu oluşturulup, dışarıdan veri alması gerektiğinde parametre olarak veri alınabilir.
- ExtraReducers içerisinde addCase kullanılarak veri çekme işleminin tamamlandığında yapılacak işlemler tanımlanabilir.
- 29:27Redux'ın Avantajları
- Redux, ortak bir state management alanı sağlar ve sayfa bazında değil arka tarafta bir state oluşturmayı sağlar.
- Oluşturulan state'ler tüm sayfalarda çağrılabilir ve istenilen şekilde revize edilebilir.
- Genelde sayfa bazında API'lerle veri çekmek yerine Redux gibi yapıların kullanılması önerilmektedir.
- 45:02React'te State Yönetimi ve Fonksiyonel Butonlar
- React'te state yönetimi için "setState" fonksiyonu kullanılır ve tek satırlık işlemlerde kalabalık oluşturmak gerekmez.
- Çoklu işlemleri yaparken fonksiyonellik kazandırmak için koşullu ifadeler kullanılabilir, örneğin "count" değeri sıfırdan küçük olduğunda azaltma işlemi yapılmaz.
- Butonlarda "onClick" özelliği kullanılarak fonksiyonlar çağrılabilir ve butonlara "name" gibi isimler verilebilir.
- 48:45Input Elementleri ve OnChange Olayı
- Input elementlerinde "onChange" olayı kullanılarak kullanıcı girişlerini takip edebilirsiniz.
- "onChange" fonksiyonu dışarıdan bir "event" parametresi alır ve bu event'in "target.value" özelliği kullanılarak input değeri alınabilir.
- Konsol ekranı üzerinden event'in içeriğini kontrol ederek hangi değerlerin alındığını görebilirsiniz.
- 52:52Çoklu State Değişkenleri ve Array Kullanımı
- Birden fazla state değişkeni oluşturabilirsiniz ve bunları farklı bileşenler arasında paylaşabilirsiniz.
- Buton tıklamalarıyla alınan değerleri bir state değişkenine kaydedebilir ve ekranda görüntüleyebilirsiniz.
- Daha karmaşık senaryolar için array kullanarak birden fazla değer saklayabilir ve her tıklamada yeni değerleri array'e ekleyebilirsiniz.
- 56:34Array İşlemleri ve Map Fonksiyonu
- Verileri setlemek için önce tüm verileri dönüp, sonra yeni veriyi sonuna eklemek gerekiyor.
- Array'leri ekrana map'leyerek gösterebilir ve bu çoklu verilerin kullanımını teşvik etmek için kullanılır.
- Map fonksiyonu iki parametre alır: ilk parametre gezilen her bir elemanın ismi (dt), ikinci parametre ise elemanın indeksi (index).
- 59:30Key Parametresi ve Ekrana Yazdırma
- Map fonksiyonunu kullanırken key parametresini mutlaka kullanmak gerekir, aksi halde ileride sorunlar yaşanabilir.
- Her bir elemanı div'ler içinde ekrana yazdırmak için return edilen div içinde dt kullanılır.
- Ekleme işlemlerini yaparken sildirme, güncelleme ve farklı faktoring işlemleride yapılabilir.
- 1:01:04Use Effect Hook'u
- React'te en çok kullanılan iki hook'tan biri olan use effect, sayfa yüklendiği anda gerçekleşmesini istediğin olayları içerir.
- Use effect'in ikinci parametresi boşsa, sayfa yüklendikten sonra bir kere çalışır; parametre varsa, o parametre güncellendiğinde sürekli çalışır.
- Use effect ile sayfa yüklendikten sonra belirli bir süre geçtikten sonra da işlem yapılabilir.
- 1:05:35Routing İşlemleri
- Farklı sayfalar arasında geçiş yapmak için routing işlemleri yapılır.
- Routing işlemleri için npm paketleri kurmak gerekir, öncelikle react router dom paketi kurulmalıdır.
- React router dom sürekli güncellenen bir yapı olduğu için, temel düzeyde daha anlaşılır bir şekilde göstermek isteniyor.
- 1:07:17React Router Kullanımı
- İki sayfa (Home ve Details) oluşturulup pages klasörü altına yerleştiriliyor.
- React Router Dom kullanmak için gerekli yapılar import ediliyor ve temel render edilen sayfaya ekleniyor.
- Routing için Router, Routes ve Route bileşenleri kullanılarak sayfa yönlendirmeleri yapılandırılıyor.
- 1:09:17Routing Yapılandırması
- Routing yapılandırmasında iki parametre kullanılıyor: yönlenmesi gereken sayfa ve yönlendikten sonra karşıma çıkması beklenen sayfa.
- İlk yüklenen sayfa olarak Home, URL'de "detail" olarak yönlendirildiğinde ise Details sayfası gösteriliyor.
- URL üzerinden "detail" yazıldığında Details sayfasına yönlendirme yapılıyor.
- 1:11:25UseEffect ve Veri Mapleme
- Home sayfasında veri mapleme işlemi yapılıyor.
- Data adında bir dizi oluşturulup, her bir objede name, id ve description alanları yer alıyor.
- Örnek olarak React ve Angular için veri oluşturuluyor.
- 1:12:52React'te Veri Gösterimi ve Yönlendirme
- Verileri map fonksiyonu kullanarak ekranda göstermek için div elementi oluşturuluyor ve verilerin name ve description özellikleri ekrana yazdırılıyor.
- Verilerin üzerine click olayı eklenerek detaylar sayfasına yönlendirme yapılıyor.
- React Router Dom kütüphanesinden "useNavigate" fonksiyonu kullanılarak sayfa yönlendirmesi yapılıyor.
- 1:16:26Dinamik URL Parametreleri
- Yönlendirme işlemi sırasında dinamik bir ID parametresi gönderiliyor ve bu parametre detail sayfasında karşılanıyor.
- "useParams" fonksiyonu kullanılarak URL'den gelen dinamik parametreler (ID) alınıyor.
- Dinamik URL parametreleri sayesinde farklı ID'ye göre farklı verileri filtreleyebiliyoruz.
- 1:21:26Verileri Filtreleme ve Gösterme
- Detay sayfasında import edilen verileri filtrelemek için "useEffect" hook'u kullanılıyor.
- "useState" ile bir state oluşturuluyor ve filtrelenen veriler bu state'e set ediliyor.
- Filtrelenen veriler ekrana basılıyor ve ID'ye göre farklı veriler gösteriliyor.
- 1:26:49URL Bilgilerine Erişim
- "useLocation" fonksiyonu kullanılarak URL bilgilerine erişim sağlanıyor.
- Location objesi üzerinden path name gibi URL bilgileri alınabiliyor.
- Grapper adlı bir extension kullanılarak seçenekler arasındaki en iyi sonuçlar gösteriliyor.
- 1:29:05React'te useRef Hook'u
- Ders önceki komponentler ve props kısmından sonra, useState ve useEffect hook'ları sonrasında useRef hook'u konusuna geçiyor.
- useRef, React için otomatik olarak HTML elementlerine erişim sağlayan ve hızlı çalışan bir yapıdır.
- Normal JavaScript'te document.getElementById gibi yöntemlerle elementlere erişirken, React'te useRef daha basit ve hızlı bir çözüm sunar.
- 1:32:11useRef Kullanımı
- useRef hook'u import edilerek kullanılabilir ve başlangıç değeri belirtilebilir.
- useRef ile alınan referansın current özelliği üzerinden HTML elementine erişilebilir.
- useRef ile alınan değerlerin current özelliği üzerinden değiştirilebilir, örneğin bir counter değeri arttırılabilir.
- 1:36:20useRef ve useState Farkı
- useState ile counter değeri arttırıldığında sayfa render olurken, useRef ile current değeri değiştirildiğinde sayfa render olmaz.
- useRef ile yapılan değişiklikler sayfanın re-render olmamasını sağlar, böylece performans kazanılır.
- useRef ile input elementine focus yapmak gibi işlemler kolayca yapılabilir.
- 1:39:53useRef Avantajları
- useRef ile yapılan işlemler, normal JavaScript yöntemlerine göre daha temiz kod sağlar.
- React'in önerdiği yöntemleri kullanmak, ilerleyen zamanlarda daha iyi bir developer olmayı sağlar.
- 1:40:31Use Memo Kullanım Amacı
- Use memo genellikle büyük projelerde ve çoklu veri kullanımında kullanılır, küçük projelerde nadiren kullanılır.
- Use memo, büyük işlemlerin her render olduğunda sayfayı bozmasını engelleyerek performans artışı sağlar.
- Use memo, büyük fonksiyonları sadece bir kere çalıştırıp hafızada tutarak, gereksinim duyulduğunda kullanır.
- 1:42:30Use Memo Örneği
- Örnek için count ve textChange state'leri oluşturulur.
- Count değerini ekranda gösteren bir div ve count değerini artıran bir buton oluşturulur.
- Büyük bir fonksiyon (largeData) oluşturulur ve her render olduğunda çalıştırılır.
- 1:47:09Use Memo Problemi ve Çözümü
- Input'a yazıldığında sayfa donma sorunu yaşanır çünkü büyük fonksiyon sürekli çalıştırılır.
- Use memo kullanılarak büyük fonksiyon sadece bir kere çalıştırılır ve hafızada tutulur.
- Use memo, girdi değiştiğinde fonksiyonu tekrar çalıştırır, aksi halde önbelleğe alır ve tekrar tekrar çalıştırmaz.
- 1:53:13React.memo ve useMemo Kullanımı
- React.memo ve useMemo birlikte anlatılacak, ancak büyük çaplı verileri cashleyip ekranda tutmak istediğinizde useMemo kullanmak mantıklıdır.
- useMemo'nun içerisine yazdığınız şey fonksiyon dönmüyor, state güncellendiğinde sadece sonucu cashler ve kullanmanıza sağlar.
- useCallback fonksiyon döner ve fonksiyonun içerisindeki her şeyin keşlenmesini sağlar, en ufak bir değişim anında yapıları güncelleme işlemine tabi tutar.
- 1:55:32React.memo Örneği
- İki komponent kullanılarak, birinci komponentin render edilmesi her click ile gerçekleşiyor, ancak React.memo kullanıldığında bu durum engelleniyor.
- React.memo, komponentin sürekli render edilmesini engelleyerek performansı artırıyor.
- React.memo kullanıldığında, komponent sadece başlangıçta render edilir ve sonrasında click yapıldığında bile render edilmez.
- 2:00:00useCallback Kullanımı
- useCallback, fonksiyonun kaç kere çalışması gerektiğini ve hangi parametrelerin değişmesi durumunda çalışması gerektiğini belirler.
- useCallback'in ikinci parametresi, fonksiyonun tekrar tekrar çalışmasını belirleyen faktörleri içerir.
- useCallback ve React.memo birlikte kullanıldığında, belirli parametrelerin değişmesi durumunda sadece o zaman fonksiyon çalışır ve render işlemi gerçekleşir.
- 2:04:38Veri Çekme İşlemleri ve Redux Toolkit
- Veri çekme işlemleri için iki tabanlı yöntem kullanılabilir: fetch ve AOS.
- Veri çekme işlemlerinde Redux Toolkit kullanılacak ve daha önce çekilen detaylı bir video izlenebilir.
- Backend tarafından gelen veriler, iletilen endpoint'lerle birlikte axios veya fetch ile istek yollanarak kullanılabilir.
- 2:06:12Routing Yapısı Kurulumu
- Routing yapısı için router, route ve Route bileşenleri kullanılır.
- Home ve detail sayfaları için statik ve dinamik linkler oluşturulur.
- Detay sayfasına gidildiğinde dışarıdan bir ID alınması planlanmaktadır.
- 2:08:56API İstekleri ve Axios Kullanımı
- Örnek göstermek için fake store api.com kullanılacaktır.
- Home sayfasında sayfa yüklendiğinde bir kez çalışan useEffect oluşturulur.
- Asenkron fonksiyon çalışması için axios kütüphanesi kurulmalıdır.