Photo by CDC on Unsplash

REACT

React Component Model

Bugünkü yazımızda Ryan Florance aşağıdaki React Component Model üzerine attığı Tweet üzerine fikirlerimi paylaşmak istiyorum.

Frontend Development With JS
4 min readJul 14, 2023

--

Ryan Florance aşağıdaki yazısı üzerine React Component Model üzerine fikirlerimi paylaşacağım.

https://twitter.com/ryanflorence/status/1679497644056649728?s=48&t=lriBB0OrU9Bybp4cz-X-FA

React ve temel kavramları ile ilgili bir çok yazı yazdım bu yazılar üzerinde anlatımlar yaparken Class Component zamanında Declarative, JSX, state, props, ve component lifecycle üzerine , bileşenlerin birbirine composition(kapsaması) üzerine çokca yazdık, çizdik.

Aşağıdaki yazılara bu linkten erişebilirsiniz.

https://onurdayibasi.com/react/

React Hook lar ile birlikte Class Component → Functional Component, setState → useState, lifeCycle → useEffect gibi yapıların geldiğini React Component Model’in Composition ve Encapsulation anlamında daha Fonksiyonel programlamaya kaydığını gördük. Aşağıdaki yazılara bu linkten erişebilirsiniz.

Ve bu Hook yapısını nasıl değişim gösterdiğini aşağıdaki linkten erişebilirsiniz.

React Component Model üzerine Ryan Florance

React tek bir karakteristik yapı üzerinde baktığında aslında çok sade ve basit başka bir yapı daha eklenmiş gibi düşünebilirsiniz.

Ama bileşenlerden uzaklaştığınız zaman react component model bu encapsulation ve composition yapabilmesi için kütlece büyük bir adaptasyonu içerdiğini görebilirsiniz diyor ve aşağıdaki kısmı ekliyor

“RSC is just Hotwire”
“useEffect is just a difficult observable”
“useState is a less efficient signal”
“Async components are just PHP”

RSC is just Hotwire

Hotwire Hey, Basecamp, Ruby Rails geliştiren ekibin oluşturduğu bir teknoloji , Modern Web uygulamaları sırasında sunucuların JS kullanma gereksini olmadan HTML yerine JSON göndererek Hotwire engine işleri çözümlemesi..

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire

Özetle RSC Serialize edilmiş VDOM JSON olarak sunucudan client aktarılmasını sağlayan bir teknoloji.

useEffect is just a difficult observable

useEffect kullanması bir çok problem çıkartabilen bir Hook çeşidi, Bileşenlerde değişen bir state veya props sonucu render sonrasında oluşacak SideEffect hepsini buradan yönetmemiz gerekiyor. Bu aslında bileşen takılmış değişiklikleri observable pattern yönetme çabası

Sonuçta useEffect kullanmayın kadar gelen bir çok yazı , yorum veya doğru kullanılması ile ilgili makale mevcut

You Might Not Need an Effect

useState is a less efficient signal

Signal kütüphanesi Prereact ekibi tarafından State Management daha efektif kullanmak için çıkarılan 3rd Party bir kütüphane. Bu yaklaşım birçok Framework tarafından benimsenirken React ana yapısına alma konusunda gelecek planları ile uyuşmadığı için kabul etmedi, 3rd party kütüphane olarak siz kendiniz kullanmak isterseniz ekliyorsunuz.

https://github.com/preactjs/signals

Async components are just PHP

React içerisinde Async component’ lar sanki PHP veritabanına ulaşıp, client oluşturulmuş HTML dönmesi gibi bu bileşenler Data Katmanı üzerinden veriye ulaşıp, VDOM için serialize edilmiş JSON verilerini dönecek özel bileşenlere dönüşüyor. Sanki bir nevi PHP gibi davranıyor.

Sam Selikoff dediği gibi bileşenler üzerinden concern ayrılabildiği bir yapıya geldik.

  • UserTable → Async / Server Comp → DB’den veri çeken bir konsept
  • Modal → useClient → Client kısmında kullanıcı ile etkileşime giren bir konsept
  • Wifiİndicator → observable → Browser APIsini dinleyen ayrı bir bileşen

LearnReactUI.dev

React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.

LearnReactUI.dev

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

No responses yet