Ana Sayfa

React'i Baştan Yazmak: Adım Adım Kendi React Kütüphaneni Oluştur

1 dk okuma

Bu makale, React 16.8'in mimarisini temel alarak, sıfırdan kendi React kütüphanemizi nasıl oluşturacağımızı adım adım açıklıyor. Gerçek React kodundaki tüm optimizasyonlar ve temel olmayan özellikler dışarıda bırakılarak, kütüphanenin çekirdek yapısı anlaşılır bir şekilde ele alınıyor. Makale, daha önceki "kendi React'ini oluştur" serilerinden farklı olarak, Hooks kullanımına odaklanıyor ve sınıf tabanlı bileşenlere ilişkin kodları dışarıda bırakıyor. Okuyuculara, createElement fonksiyonundan render fonksiyonuna, eşzamanlı moddan (Concurrent Mode) fiber'lara, render ve commit aşamalarından uzlaştırmaya (Reconciliation), fonksiyonel bileşenlere ve nihayetinde Hooks'a kadar React'in temel yapı taşlarını kendi elleriyle inşa etme fırsatı sunuluyor.

Makale, temel kavramları gözden geçiren "Sıfırıncı Adım" ile başlıyor. Bu bölümde, React, JSX ve DOM elemanlarının nasıl çalıştığına dair temel bilgiler pekiştiriliyor. JSX'in Babel gibi araçlar tarafından createElement çağrılarına nasıl dönüştürüldüğü, bir React elemanının type ve props (içerisinde children da bulunan) özelliklerine sahip bir nesne olduğu açıklanıyor. Ayrıca, ReactDOM.render fonksiyonunun DOM'u nasıl değiştirdiği ve bu sürecin vanilla JavaScript ile nasıl taklit edilebileceği detaylandırılıyor. Metin, bir React elemanının DOM düğümüne dönüştürülme sürecini, yani eleman tipine göre bir DOM düğümü oluşturma, özelliklerini atama ve alt elemanlarını (children) işleme adımlarını basit örneklerle gösteriyor. Bu yaklaşım, React'in iç işleyişini derinlemesine anlamak isteyen geliştiriciler için değerli bir kaynak sunuyor.

İçgörü

Bu makale, React'in temel çalışma prensiplerini ve mimarisini derinlemesine kavrayarak, geliştiricilerin daha bilinçli ve optimize edilmiş uygulamalar yazmalarına olanak tanıyor.

Kaynak