React neyin nesi?

Üzerinde çokça çalışamama rağmen bir türlü fırsat bulup yazamadığım bir dil olan “React” ne ola ki diye soranlarınız için kısaca bir kaç bilgi vermek isterim.

React, kullanıcı arayüzleri oluşturmak için verimli ve esnek bir JavaScript kütüphanesidir. Karmaşık arayüzleri “bileşenler” (component) adı verilen küçük ve izole kod parçalarından oluşturmanızı sağlar.

React birden fazla çeşitte bileşene sahiptir. Biz önce React.Component alt sınıfı ile başlayacağız.

class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

// Example usage: <ShoppingList name="Mark" />

Bileşenleri ekranda ne göstermek istediğimizi söylemek için kullanıyoruz. Varolan verimizde bir değişiklik olduğunda React verimli bir şekilde güncellenip bileşenlerimizi tekrardan yorumlar.

Her bir React bileşeni kapsüllenir ve bağımsız olarak çalışabilir. Bu şekilde basit bileşenlerden karmaşık arayüzler oluşturabilirsiniz.

Burada ShoppingList bir React bileşen sınıfı ya da React bileşen tipi olarak isimlendirilir. Bir bileşen “props” (proporties kelimesinin kısaltılmış hali) olarak adlandırılan parametreler alır ve render yöntemi ile görüntülenecek bir hiyerarşi döndürür.

Render yöntemi ekranda görmek istediğimiz şeyin tasvirini(tanımını) döner. React ise tasviri alır ve sonucu gösterir. Çoğu React geliştiricisi bu yapıyı daha basit bir şekilde yazabilmek için “JSX” adındaki söz dizimini kullanır.

Uygulama yaparak daha hızlı ve daha akılda kalıcı bir şekilde öğreneceğinizi düşünüyorum. Bu nedenle bir sonraki yazımda basit bir React uygulaması yapacağım.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade