Photo by Killian Cartignies on Unsplash

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.

Frontend Development With JS
3 min readMay 9, 2024

--

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

https://onurdayibasi.dev/interaction-knowledge-map

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.

https://onurdayibasi.dev/mouse-events

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.

https://onurdayibasi.dev/draggable-sidebar

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.

https://onurdayibasi.dev/dnd-sorting

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.

--

--