Bildirimsel
React, interaktif kullanıcı arayüzü geliştirmeyi zahmetsiz hale getirir. Siz uygulamanızdaki her durum için basit sayfalar tasarlayın. React, veriniz değiştiğinde sadece doğru bileşenleri verimli bir şekilde güncellesin ve oluştursun.
Bildirimsel sayfalar, kodunuzu daha öngörülebilir ve hata ayıklaması daha kolay hale getirir.
Bileşen Tabanlı
Kendi state’ini yöneten bileşenler geliştirin ve onları bir araya getirerek kompleks kullanıcı arayüzleri oluşturun.
Bileşen mantığı, şablonlar yerine JavaScript’te yazıldığı için, uygulamanız boyunca kolayca zengin veri iletebilir ve state bilgisini DOM dışında tutabilirsiniz.
Bir kere öğrenin, Her yerde yazın
Kullandığınız diğer teknolojilerle ilgili varsayımlar yapmıyoruz. Bu nedenle yeni özellikleri, mevcut kodunuzu baştan yazmadan React ile geliştirebilirsiniz.
Aynı zamanda React, Node kullanarak sunucu tarafında sayfa oluşturabilir ve React Native ile mobil uygulamalara güç sağlar.
Basit Bir Bileşen
React bileşenleri, girdi verileri alan ve ne gösterileceğini dönen bir render() methodu sağlar. Bu örnekte, XML benzeri bir sentaks olan JSX kullanılıyor. Bileşene iletilen girdi verilerine, render() methodunda this.props aracılığıyla ulaşılabilir.
JSX isteğe bağlıdır ve React’i kullanmak için gerekli değildir. JSX derleme adımı ile üretilen ham JavaScript kodunu görmek için Babel REPL‘i deneyin.
Kod örneği yükleniyor...
Durumlu Bir Bileşen
Bir bileşen, girdi verileri (this.props ile ulaşılabilir) almanın yanı sıra, dahili state verisi (this.state ile ulaşılabilir) yönetebilir. Bir bileşenin durum verileri değiştiğinde, oluşturulan görüntü render() methodunun tekrar çağırılması ile güncellenecektir.
Kod örneği yükleniyor...
Bir Uygulama
props ve state kullanarak, küçük bir Yapılacaklar (Todo) uygulaması oluşturabiliriz. Bu örnekte state, hem öğelerin bulunduğu güncel listeyi hem de kullanıcının girmiş olduğu metni takip etmek için kullanılıyor. Olay yöneticileri, satıriçi oluşturuluyor gibi gözükmelerine rağmen, olay delagasyonu ile toplanıp gerçekleştirilir.
Kod örneği yükleniyor...
Harici Eklentiler Kullanan Bir Bileşen
React, başka kütüphaneler ve frameworkleri arayüz olarak kullanmanıza olanak sağlar. Bu örnek, <textarea> değerini anlık dönüştürmek amacıyla, bir Markdown kütüphanesi olan remarkable‘ı kullanmaktadır.