REACT SAMPLES
React Interaction Samples
Bu bölümde kullanıcı etkileşimlerini nasıl ele alıyoruz, Bu etkileşim mouse, keyboard, speech, motion olabilir. Bu konuda geliştirdiğim örnekleri bu bölüm altında paylaşıyor olacağım.
Bu kısımda Interaction konusunda sektörde gerçekleştirdiğim işlerde elde ettiğim deneyimlerimi topladığım örnekleri listeliyor olacağım.
Interaction Knowledges
Etkileşim dediğimiz bir düğmeye basmak, klavyeden yazılar yazmak veya komutlar vermek veya bunları sesle gerçekleştirmek, hareket sensörleri ile bu etkileşimi aktarmak gibi birçok etkileşim yöntemi olabilir.
1. Mouse Events
Bu örnekte bir alanın içerisine giriş (enter), üzerinde gezme (over) ve çıkma (out) olaylarını denediğim bir örnek yer almaktadır.
Burada Event tetikleme işlemlerinin buble edilerek yayılırlar. Bu konuda daha detaylı bilgi edinmek için Event Capturing ve Bubbling yöntemlerini anlattığım Web Events Blog yazısını okuyabilirsiniz.
- Event Capturing: Bu yöntemde tıklanan elemana yukarıdan aşağıya doğru ulaşılır. HTML → BODY → FORM → DIV → P olarak eventleri oluşturur.
- Event Bubbling: Bu yöntemde de tıklanan elemanda aşağıdan yukarıya doğru eventler oluşturulur. P → DIV → FORM → BODY → HTML
Biz bu event’ in yayılmasını engelleyebiliriz. stopPropagation ile işte bunu deneyebilmeniz için ekrana farklı opsiyonlar ile deneyebilme imkanı sundum.
Center ise iç içe karelerin ortalanmasını sağlar. Bu sayede Mouse Event mekanizmasını daha iyi şekilde anlayabilirsiniz.
2. Draggable Sidebar
Burada Sidebar çizgisini taşıyarak sağ ve sol alanlarını büyütüp küçültebilme örneğini gerçekleştirdim. Bu Sidebar üzerine geldiğinizde mouse iconu resizable hale geliyor ve bu alanı sürükleyebiliyorsunuz.
Bu kısmında kodunu daha detaylı anlamak için React Dnd (Drag and Drop) Kütüphanesi blog yazımı okumanızı öneririm.
Drag Drop konseptini anlamak Web Events (Drag And Drop) blog yazımı okumanızı öneririm.
3. Sorting With Drag and Drop
Bu örnekte örneğin Bir Dashboard Chart’lar veya Listedeki Item’ larını sırasını sürükle, bırak ile değiştirmek istediğimizi varsayalım. Bu örnek bu bileşenleri sürükle bırakla yerlerini değiştirebilmenize olaran sağlar.
Drag Drop konseptini anlamak Web Events (Drag And Drop) blog yazımı okumanızı öneririm.
4 Custom Hooks
CustomHook Deneyimlerini Shortcut olarak ekledim, çünkü bir çok UserInteraction günümüzde React Hook’ları ile gerçekleştiriliyor. Bundan dolayı bunun altına bun ile kısayol tuşunu ekledim.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
