React nedir? Tanım, İşlev ve Uygulamalar

React nedir?

React, son derece duyarlı ve dinamik kullanıcı arayüzleri oluşturduğu bilinen açık kaynaklı bir JavaScript koleksiyonudur. Böylece ReactJS, klasik bileşen tabanlı tasarımı ile ölçeklenebilir mobil uygulamalar ve ön uç web oluşturmak için çok etkili bir çözüm olarak ortaya çıkıyor. React ile yeniden kullanılabilir UI bileşenleri bile oluşturabilirsiniz.

Jordan Walke, Facebook ile yazılım mühendisi olarak çalışırken React'i geliştirdi. 2011'de Facebook'ta ve daha sonra 2012'de Instagram'da kamuoyuna sunuldu. React, öncelikle etkileşimli, çekici ve doğal uygulamalar oluşturmaya odaklanır. Ayrıca, sadece temel kodlama ile size en iyi render performansını sağlayabilir.

React, geliştiricilerin sayfayı yeniden yüklemeden verileri dönüştürebilen kapsamlı bir web uygulaması oluşturmasına olanak tanır. Bunu MVC şablonunda görüntüleyebilir ve diğer JavaScript çerçevelerini birleştirerek kullanılabilir. Airbnb, Netflix, New York Times ve Instagram gibi birçok önde gelen şirket React'i kullandı. Ayrıca Angular.js gibi çerçeveler için de etkili olmuştur.

React, sunucu tarafı oluşturma, gerçek zamanlı güncellemeler vb. gibi bazı dikkat çekici özelliklere sahiptir. Neyse ki, bu JavaScript kitaplığı kimseyi etkilemeyi başaramaz.

React çerçevesinde yeniyseniz veya yalnızca temel kavramlarınızı yeniliyorsanız, size React kitaplığının tüm temellerini sağlamak için buradayız. Daha fazlasını öğrenmek için daha fazlasını okumak isteyebilirsiniz!

React'in Temel Özellikleri

React JavaScript, güçlü özellikleri nedeniyle geliştiriciler topluluğunda büyük bir hayran kitlesine sahiptir. Ayırt edici özelliklerinden bazıları şunlardır:

1. Sanal DOM

Esnek ve hızlı uygulama geliştirmeyi kolaylaştırdığı için bu, React'in temel bir özelliğidir. Ayrıca, React'in kendi sanal hafızasında bir web sayfasını hafıza mutabakat algoritması ile replike etmesini sağlar. Böylece, orijinal DOM yerine sanal bir DOM temsil edilir.

Sanal DOM, uygulamadaki her değişiklikle tüm kullanıcı arabirimini yeniden oluşturur. Unutulmamalıdır ki, yalnızca değişen bileşenler güncellenir ve bileşenlerin geri kalanı sanal gösterimde aynı kalır.

Böylece React, geliştiriciler için geliştirme sürecini uygun maliyetli ve hızlı hale getirmeye yardımcı olur.

2. JavaScript XML'i

JavaScript XML, popüler olarak JSX olarak bilinir. HTML'ye oldukça benzeyen bir sözdizimidir. Öncelikle bir uygulama kullanıcı arabiriminin görünümünü açıklamak için kullanılır. ReactJS'in geliştiricilere sunduğu kritik özelliklerden biridir. Sözdizimini oluşturmak için web sayfasındaki HTML ile aynı bileşenleri enjekte eder.

Bu, ReactJS'nin yapı taşlarını zahmetsizce yazmanıza yardımcı olur. Ayrıca geliştiricilerin en kolay şekilde sözdizimi oluşturmasına olanak tanır.

3. Tek yönlü veri bağlama

React, kolay iş yönetiminin başlıca nedenlerinden birini oluşturan tek yönlü veri akışı sunar. ReactJS'de tek yönlü veri bağlama kullanılır, bu da geliştiricilerin herhangi bir bileşeni doğrudan düzenleyemediği anlamına gelir. Ancak, herhangi bir değişiklik yapmak için geri arama işlevi aracılığıyla çalışmaları gerekir. Bu nedenle, çalışma sürecine tek yönlü veri bağlama denir.

ReactJS, merkezi bir noktadan veri kontrolü gerçekleştirmek için Flux(bir JavaScript uygulaması) kullanır. Böylece geliştiriciler mobil uygulamaları ve web'i kolayca yönetebilirler. Ayrıca verimliliği artırır ve uygulamayı daha esnek hale getirir.

4. Yerli Tepki Ver

React Native, web bileşenleri yerine yerel bileşenleri kullanacak şekilde özelleştirilmiştir. Ek olarak, ReactJS için yerel tepki biçimini işler. Bu nedenle, React Native anlayışını ve ilkelerini elde etmek için ReactJS kavramlarıyla çok doğru ve kesin olunmalıdır. Bunlar sahne, durum, jsx ve bileşenleri içerir.

React Native, tepki kodunu iOS ve Android platformlarıyla uyumlu hale getirmek için değiştirir. Ayrıca geliştiricilere bu platformun yerel özelliklerine erişim sağlamayı amaçlamaktadır.

5. Bildirime Dayalı Kullanıcı Arayüzü

Declarative Ul, uygulamanın basit bir görünümünü oluşturan ve ilgi çekici mobil uygulamalar oluşturmaya yardımcı olan bir özelliktir. Web ve mobil uygulamalar için etkileşimli bir kullanıcı arayüzü sağlar. ReactJS, uygun veri değişikliğine sahip olmak için bu özelliğin yardımıyla sadece doğru bileşenleri yeterince günceller.

Bu özellik, kodun daha okunabilir olmasını sağlarken hata ayıklamayı da basitleştirir.

6. Bileşen Tabanlı Mimari

Vurgulanan yukarıdaki özelliklerden, ReactJS mimarisinin bileşen tabanlı bir platform olduğu açıktır. Her bileşenin kendine özgü yeteneği ve özel mantığı olduğu birden çok bileşene bölünmüştür.

Bileşen tabanlı mimari, React'in bir şablon kullanılarak değil JavaScript ile yazıldığını bildirir. Böylece geliştiriciler, DOM'yi etkilemeden uygulamada dolaşabilirler.

Bileşen, Aksesuarlar ve Durum

1. Bileşenler

Bileşenler, herhangi bir ReactJS uygulamasının temel oluşturma blokları olarak kabul edilir. Kesin olmak gerekirse, tek bir uygulama genellikle birden çok bileşenden oluşur. Kullanıcı arayüzünün en kritik parçasıdır. Kullanıcı arayüzünü, hızlı bir şekilde işlenebilen yeniden kullanılabilir ve bağımsız parçalara ayırmaya yardımcı olur.

Bileşenler, aşağıdaki gibi iki ana alanda sınıflandırılır:

• Fonksiyonel Bileşen

İşlevsel bileşenler, basitçe bir sunum işleviyle temsil edilir. Bu işlev, sahne alır ve bir React öğesini sayfaya dönüştürmek için değiştirir. Çoğunlukla, mümkün olduğunda, öngörülebilir ve özlü oldukları için fonksiyonel bileşenlerin kullanılması tercih edilir. Ayrıca, tamamen sunum amaçlı olduğundan, çıktı her zaman aksesuarlarla aynıdır.

İşlevsel bileşen ayrıca durumsuz, sunumsal ve aptal olarak da adlandırılır. Tüm bu isimler, fonksiyonel bileşenlerin üstlendiği doğadan elde edilir:

• Vatansız, devleti tutmadıkları veya yönetmedikleri için.
• Sunumsal, tümü çıktı olarak UI öğesi olarak.
• İşlevsel, çünkü bunlar temel işlevler ve başka bir şey değil.

İşlevsel bileşen örneği:

const Tebrik = () => <h1>Merhaba, ben aptal bir bileşenim!</h1>;

• Sınıf Bileşeni

Sınıf bileşenleri, ES6 sınıfı sözdizimi kullanılarak oluşturulur. Ek olarak, mantık, yerel durum ve diğer birkaç yetenek içerme yeteneği gibi özelliklere sahiptirler. Bu bileşenler bir kapsayıcı veya durum bilgisi olan ve akıllı olarak kabul edilir:

• Sınıf, temelde kategorilere ayrıldıkları için.
• Durum bilgisi, yerel durumu tutabildikleri ve yönetebildikleri için.
• Mantık içerdikleri için akıllı.
• Konteyner, çok sayıda başka bileşeni içerdikleri veya tuttukları için.

Sınıf bileşenlerinin büyük bir işaretlemesi vardır ve işlevsel bileşenlerin tam tersidir. Bunları gereğinden fazla kullanırsanız, kodun test edilebilirliğini ve okunabilirliğini etkileyebilir.

Sınıf bileşeninin en basit biçimi:

sınıf Tebrik, React.Component'i genişletir {

render(){

return <h1>Merhaba, ben akıllı bir bileşenim!</h1>;

}

2. Sahne

Aksesuarlar, ReactJS bileşenlerinin dinamik ve kolayca özelleştirilebilir olmasını sağlıyor. Bir bilgisayardan diğerine veri sağlamanın yoludur - tek yönlü bir veri akışıdır. Bileşenler, alınan aksesuarlara göre özelleştirilmiş React öğelerini kabul edebilir ve iade edebilir.

Proplar salt okunurdur, kendisine iletilen propları asla değiştirmemesi gereken bileşenlerdir. Yani örneğin çıktı ve girdi olarak aynı bileşen verilmelidir.

3. Devlet

Durum, bileşen hakkında bilgi veya veri içeren bir integral React öğesidir. Zamanla bileşenin durumu değiştirilebilir; ne zaman değişse, bileşenin oluşturulmasına yol açar.

Değişiklik, kullanıcı eyleminin yanıtı veya sistem tarafından oluşturulan olaylar nedeniyle gerçekleşebilir. Bu değişiklikler, bileşeni ve nasıl oluşturulacağını tanımlar.

toparlamak

React, geliştirme sürecini basitleştirerek geliştiricilere bol miktarda esneklik sunar. React Native sayesinde “Bir kez öğren, her yere yaz” yapabilirsiniz. Böylece, React'in temel mimarisini ve ilkelerini anladıktan sonra, tamamen işlevsel web ve mobil uygulamalar tasarlayabilirsiniz. React'in aktif bir destek topluluğuna sahip olması, onu geliştiriciler için daha da çekici bir seçim haline getiriyor - uygulama geliştirme zorluklarından her zaman sizi yönlendirecek birini bulacaksınız.

React ve benzeri trend olan diğer endüstri araçlarının özünde ustalaşmak istiyorsanız, kesinlikle upGrad'ın Yazılım Teknolojisi kurslarına göz atmalısınız . upGrad, 40.000'den fazla öğrenciden oluşan küresel bir öğrenci tabanında eşler arası öğrenmeyle desteklenen genel bir gelişim vaat ediyor. İyi yapılandırılmış bir müfredatın yanı sıra, öğrenciler en iyi eğitmenler ve endüstri uzmanlarıyla etkileşimli canlı oturumların keyfini çıkarırlar.