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.
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'));
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>;
}
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.
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> );
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 &, < ifadesi <, > ifadesi >, " ifadesi ", ' ifadesi ' ş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 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.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…