React Tutorial 2023 4 – React’in Temelleri 2 – Yeni Kodlama Yaklaşımı JSX

Merhabalar. React eğitimlerimize React’in temellerinin 2. konusu yani JSX ile devam ediyoruz.

Facebook ekibi React’i geliştirmeye başladıklarında Syntax ile alakalı şunu fark ettiler. Html ayrı, CSS ayrı, JavaScript farklı syntaxlara sahipti. Yeni geliştirecekleri bu sistem kullanıcılara hemen hakim olup geliştirmeye geçebilecekleri bir olanak sunsun istediler. Tam da bunun için en bildikleri yapıyı React yazabilmek için entegre ettiler. Yani diyorlardı ki siz HTML yazıyor gibi yazın biz bunu tarayıcıların anlayacağı JavaScript yapısına dönüştüreceğiz.

HTML, CSS ve JavaScript yazımını iç içe geçirdikleri bir yapı oluşturdular. İşte bu yapıya da JSX dediler.

JSX, React’in kullanıcı arayüzü oluşturmak için kullandığı bir JavaScript uzantısıdır. Aslında, JSX, JavaScript’e benzer bir yapıya sahiptir ancak HTML benzeri bir syntax içerir. Bu, React elementlerini oluşturmayı ve organize etmeyi daha kolay hale getirir.

JSX’in temel amacı, React elementlerini oluşturmak için bir şablondur. React elementleri, kullanıcı arayüzünü oluşturan yapı taşlarıdır. Bu elementler, HTML benzeri syntax kullanılarak JSX içinde yazılır ve ardından React tarafından DOM’a eklenir.

JSX, JavaScript ifadeleri ile birleştirilebilir, bu da dinamik içerik oluşturmanıza olanak tanır. Bu sayede, veriye dayalı veya koşullara bağlı olarak farklı içerikleri render etmek mümkün olur.

JSX’de Temel Kullanım Örnekleri

Herhangi bir JavaScript ifadesini JSX’de süslü parantez içine sarmalayarak yerleştirebilirsiniz.

{ 2 + 2 }

{ user.firstName } ve { formatName(user) } gibi sayısal işlem, obje, değişken, fonksiyon vb kullanabilirsiniz.

function formatName(user) { return user.firstName + ' ' + user.lastName; } 
const user = { firstName: 'Ömer', lastName: 'Gülçiçek' }; 
const element = (<h1>    Merhaba, {formatName(user)}!</h1>); 

ReactDOM.render(element, document.getElementById('root'));

Fonksiyonları JSX İle Kullanmak

Derleme sonrasında, JSX ifadeleri JavaScript fonksiyonları haline gelir.

if deyimleri ve döngüler içinde JSX’i kullanabilir ayrıca bir fonksiyondan JSX return edebiliriz.

function getGreeting(user){ 
    
    if (user) { 
        return <h1>Merhaba {formatName(user)}!</h1>; 
    } 
    return <h1>Merhaba yabancı.</h1>; 
}

JSX ile Attribute Belirlemek

String ifadeleri attribute olarak belirtmek için tırnak işaretleri kullanabilirsiniz

const element =<div tabIndex="0"></div>;

Bir attribute’a JavaScript fonksiyonu yerleştirmek için süslü parantezleri kullanabilirsiniz:

const element =<img src={user.avatarUrl}></img>;

Bir attribute’a JavaScript fonksiyonu yerleştirirken süslü parantezler arasına tırnak işareti koymayın. Tırnak işaretleri string değerler için ve süslü parantezler ise JavaScript fonksiyonları için kullanmanız gerekir. Her ikisi birden aynı attribute’da kullanılamaz.

Uyarı:

JSX JavaScript’e HTML’den daha yakın olduğundan ReactDOM, HTML nitelik adları yerine camelCase adlandırma kuralını kullanır.

Örneğin JSX’te class yerine className, tabindex yerine tabIndex kullanılır.

JSX ile Child Belirtmek

Bir etiket boşsa (child element içermiyorsa manasında), XML gibi hemen /> ile kapatabilirsiniz

const element =<img src={user.avatarUrl} />;

JSX etiketleri çocuk içerebilir:

JSX elementindeki ana kapsayıcının içindeki ifadeler çocuk (child) olarak adlandırılır. Örneğin, üstteki ifadede <div> ana kapsayıcısının içerisinde bulunan <h1> ve <h2> etiketleri çocuk olarak adlandırılır.

const element = ( <div><h1>Merhaba!</h1>    <h2>Seni burada görmek güzel.</h2>  </div> );

JSX, Enjeksiyon Saldırılarını Önler

const kullaniciGirdisi = response.inputtanGelenKotuNiyetliGiris;
const baslik = <h1>{kullaniciGirdisi}</h1>;

React DOM, kullanıcı girdisini JSX’e yerleştirmeden önce otomatik olarak tüm değerleri güvenli bir şekilde işler. Bu süreçte, özel karakterler uygun unicode karşılıklarına dönüştürülerek potansiyel XSS saldırıları engellenir.

Örneğin

& ifadesi &amp;, < ifadesi &lt;, > ifadesi &gt;, " ifadesi &quot;, ' ifadesi &#39; şekline dönüştürülür.

Bu sayede, kullanıcı girdisi uygulamaya güvenli bir şekilde entegre edilir ve güvenlik riskleri önlenir.

JSX Nesneleri Temsil Eder

JSX kodlarımızı yazarken, aslında Babel aracılığıyla bu kodların React.createElement() çağrılarına dönüştürüldüğünü düşünebiliriz.

Örneğin, şu iki örnek aslında aynı işi yapar:

const element = <h1 className='greeting'>Merhaba Dünya!</h1>;

const element = React.createElement('h1', { className: 'greeting' }, 'Merhaba Dünya!');

React.createElement(), yazdığımız JSX kodlarını daha anlaşılır bir JavaScript nesnesine çevirmekle görevlidir. Basitçe ifade etmek gerekirse, yukarıdaki örnekteki gibi bir nesne oluşturur:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Merhaba Dünya!'
  }
};

Bu nesneler, React elementleri olarak adlandırılır. Pratikte, bunları, kullanıcıya göstermek istediğimiz şeyin temsilcisi olarak düşünebiliriz. React, bu elementleri okur, DOM’u oluşturmak ve güncellemek için kullanır.

Bu yazımda kısaca JSX nedir ve bildiğimiz özellikler JSX içinde nasıl kullanılır kısaca bundan bahsetmeye çalıştım. JSX’in kullanımından eğitim boyunca bahsetmeye yeni trickleri yazmaya devam edeceğim.

Bir sonraki yazımda görüşmek üzere.