Selamlar! Bu yazımızda useParams ve useNavigation hookslarına göz atacağız. useParams() Nedir? useParams, URL’deki parametreleri almak için kullanılır. Özellikle dinamik rotalarda (/product/:id gibi) kullanılır. useParams() kullanımı hakkında daha fazla bilgiye buradan ulaşabilirsiniz. Kullanım Durumu: Bir URL’den belirli bir parametreye göre veri çekmek ya da işlem yapmak istediğinde kullanılır. Örnek: URL /product/5 olduğunda id değeri “5” olarak
Bu yazımda andığım kadarıyla bu yazımda React events (olaylar) konusundan bahsedeceğim. En basit hali ile bir butona, tuşa basıldığında veya ekranda bir alana gelindiğinde bir olay tetikliyoruz. Bunları React’ta events ile yapıyoruz. Javascript’te bildiğimiz eventler ile aynı mantık çalışıyor, sadece dikkat edilmesi gereken bazı hususlar mevcut. Eventler genellikle handle kelimesi ile başlar. Tabiki zorunlu değilsiniz,
React Router paketinin kendi sitesindeki tanımı şu şekilde; “Tek görevi, URL’yi bir dizi bileşenle eşleştirmek, URL verilerine erişim sağlamak ve uygulamada gezinmek olacaktır.” Bu tanımlamaya göre istediğimiz bileşenleri istediğimiz componentler ile eşleştirerek, ekranda ilgili componenti göstermek olacaktır. Tabi bunu URL değiştirerek yapacağız. React Router Dom kurulumu ve Projeye Dahil Edilmesi Proje Dosyaları Header Kısmı Projeyi
Selamlar! Frontend kısmında çoklukla javascript ile kullandığımız koşullu ifadeleri (if, else if, else,) React ile de kolaylıkla yazılabiliyor ve kullanılıyor. Bu kısımda React’te koşullu ifadeleri nasıl yazıyoruz ona değineceğiz. Bu konu React dökümanında “Conditional Rendering” şeklinde geçiyor, o kısımdan da detaylı bilgi alabilirsiniz. 1.Klasik if-else Kullanımı JSX dışında, bir değişkeni önceden koşula göre tanımlayarak kullanabiliriz.
Selamlar! React öğrenim yolculuğumda propslarının çoğalması ve projenin içinden çıkamayışımdan “bunun için daha pratik bir şeyler olmalı” demiştim. Evet varmış, aklın yolu bir işte 🙂 Öncelikle kullanım ve aranma yoğunluklarına bir göz atalım. Redux ve Redux Toollkit paketlerinin aranma ve kullanım hacimlerini aşağıdaki grafiklerden de görebilirsiniz. Redux Nedir ve Çalışma Mantığı Bilindiği gibi propslar aracılığı
Async/await, JavaScript’te asenkron işlemleri daha anlaşılır ve düzenli bir şekilde yazmamızı sağlar. Asenkron işlemler, örneğin API’den veri çekmek gibi zaman alan işlemleri yaparken kodun beklemesini sağlamak için kullanılır. Öncelikle, async anahtar kelimesi bir fonksiyonun asenkron olmasını sağlar. Bu, fonksiyon içinde await kullanabileceğimiz anlamına gelir. await: await, bir promise’in tamamlanmasını bekler. Örneğin, bir API çağrısı yaparken
API, “Application Programming Interface” yani “Uygulama Programlama Arayüzü” anlamına gelir. Bir API, farklı yazılım uygulamaları arasında iletişim ve veri alışverişini kolaylaştıran bir arabirimdir. API’ler, bir uygulamanın diğer bir uygulamanın sunduğu işlevleri ve verilere erişebilmesi için standart bir yöntem sağlar. Örneğin, bir hava durumu uygulaması, hava durumu sağlayan bir API’yi kullanarak güncel verileri alabilir. API’ler, genellikle
Yazılımda “debug” ya da “debugging” olarak adlandırılır. Debugging, yazılım geliştirme sürecinde hataları (bug’ları) bulma ve düzeltme işlemidir. Bu terim, bir programın çalışırken yanlış veya beklenmeyen davranışlar sergilemesine neden olan sorunları analiz edip çözme sürecini ifade eder. İşlem sıralaması Debugging İşlemi Neden Kullanılır? Yukarıda da ifade edildiği gibi yazılım sürecindeki hataları bulma ve düzeltme işlemidir. Aşağıda
React’ta yan etkiler (side effects), bir bileşenin (component) ana işlevi olan UI’yi render etmek dışında gerçekleşen ve dış dünya ile etkileşimde bulunan işlemleri ifade eder. Bir bileşen (component) sadece girdileri alıp kullanıcı arayüzünü render eden basit bir işlev olabilir, ancak bir bileşen (component) ayrıca dış kaynaklarla (veritabanı, tarayıcı API’leri, sunucu ile veri iletişimi, vs.) etkileşime
Selamlar! Bugün React’ta kullanılan Hooks’lardan biri olan useEffect kullanımına değineceğiz. Kısa tanım olarak Javascript’te kullandığımız DOMContentLoaded event’ine verdiğimiz callback Function’ı sayfa tamamen yüklenildiğinde devreye giriyordu. Bu mantıkla düşünürseniz aynı işlemi yapıyor ancak sayfa yüklendiğinde değil, component render edildiğinde veya state tetiklendiğinde devreye giriyor. React dökümanından da useEffect kullanımına bakabilirsiniz, bir önceki yazımızda useState konusuna da