JSX ve JSX'in Derlenmesi

JSX Nedir?

JSX (JavaScript XML), React uygulamalarında kullanılan özel bir sözdizimidir. JSX, JavaScript kodu içinde HTML benzeri bir sözdizimi kullanmamızı sağlar. Bu, bileşenlerimizi daha okunabilir ve yazımı kolay hale getirir. JSX, JavaScript'e XML benzeri bir sözdizimi ekleyerek HTML yapılarını doğrudan JavaScript içinde tanımlamamıza olanak tanır.

Neden JSX Kullanıyoruz?

• Okunabilirlik ve Yazım Kolaylığı:

• JSX, bileşen yapısını görsel olarak daha anlaşılır hale getirir. HTML ile benzer bir sözdizimi kullanıldığı için, HTML ve CSS bilen geliştiriciler için öğrenme eğrisi oldukça düşüktür.

• İç İçe Yapılar:

• JSX ile iç içe bileşen yapıları oluşturmak çok daha kolaydır. Bu, özellikle karmaşık kullanıcı arayüzlerinde büyük bir avantaj sağlar.

• JavaScript Gücü:

• JSX, JavaScript'in gücünü kullanmamıza olanak tanır. JavaScript ifadelerini doğrudan JSX içinde kullanabiliriz. Bu, dinamik içerik oluşturmayı ve koşullu render işlemlerini basit hale getirir.

JSX Nasıl Çalışır?

JSX, tarayıcı tarafından doğal olarak anlaşılamaz. Tarayıcılar sadece standart JavaScript'i çalıştırabilir. Bu yüzden, JSX kodu önce standart JavaScript'e dönüştürülmelidir. Bu dönüştürme işlemi genellikle bir "derleyici" tarafından yapılır.

JSX'in Derlenmesi

JSX, derleyiciler aracılığıyla JavaScript koduna dönüştürülür. En yaygın kullanılan derleyici Babel'dir. Babel, JSX kodunu React'in React.createElement fonksiyonunu kullanarak JavaScript'e dönüştürür.

JSX Kod Örneği:

const element = <h1>Hello, world!</h1>;

Babel'in Dönüştürdüğü JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

Babel burda bir nevi tarayıcının anlayabileceği dile çevirerek bu bize sağlıklı bir çıktı vermeyi sağlıyor.

Sayfa kaynağı kod örneği

Yazdığımız kod'u sayfa kaynağı kısmında bu şekilde görüyoruz. Buradaki bulunan kodlar ile JSX ile yazdığımız kodlar aslında aynı sadece babelin çevirmesi ile jsx ile yazım kolaylığını burda sağlamış oluyoruz.

JSX ve JavaScript Arasındaki Farklar nelerdir ?

HTML ve XML Söz Dizimi:

• JSX, HTML ve XML benzeri bir sözdizimine sahiptir. HTML etiketleri gibi açma ve kapama etiketleri kullanılır. Bu, bileşen yapısını daha doğal hale getirir.

JavaScript İfadeleri:

• JSX içinde JavaScript ifadeleri kullanabiliriz. Bu ifadeler {} süslü parantezler içinde yazılır.

const test = 'Deneme';
const element = <h1>Hello, {test}!</h1>;

ClassName:

• JSX içinde class yerine className kullanılır. Bu, JavaScript'te class anahtar kelimesinin rezerve edilmiş olmasından kaynaklanır.

const element = <div className="container"></div>;

HTML Özellikleri:

• HTML'deki çoğu özellik JSX'te benzer şekilde kullanılır, ancak camelCase ile yazılması gerekir. Örneğin, tabindex yerine tabIndex kullanılır.

const element = <input type="text" tabIndex="0" />;

JSX Kullanımına Dair İpuçları

Fragment Kullanımı:

• Bileşenlerin gereksiz div sarmalayıcılarla dolmasını önlemek için React Fragments kullanabiliriz.

	
return (
	<>
    		<h1>Deneme Başlık</h1>
    		<p>Deneme Açıklaması ...</p>
    </>
)

Koşullu Render:

• JSX içinde koşullu render işlemleri yapabiliriz. Bu, kullanıcı arayüzünü dinamik hale getirir.

const isLoggin = true;

return (
	 <div>
    		{isLoggedIn ? <h1>Tekrar Hoşgeldiniz!</h1> : <h1> Lütfen giriş 				                  yapın.</h1>}
  	</div>
)

Map Kullanımı:

• JSX ile liste elemanlarını render etmek için map fonksiyonunu kullanabiliriz.

const items = ['Item 1', 'Item 2', 'Item 3'];
return (
  <ul>

    {items.map(item => <li key={item}>{item}</li>)}

  </ul>
)

Stil Kullanımı (geleneksel css ve jsx dizimi olarak):

• JSX ile normal css ile arasında stil yazım farkları mevcut basit bir örnek ile inceleyelim .

<button style="border: 1px solid red; color: #fff; background: red; padding: 1rem;">Css Test Style</button>

//Burada normal css ile verdiğimiz stiller

<button style={{background: 'red' , color: '#fff', padding: '1rem', border: '1px solid yellow'}}>JSX Test Style</button>

// bu örnekte ise JSX ile yazılmış stili görüyoruz. Farkına gelicek olursan iki süslü parantez arasında bir syntaxı mevcut.

• JSX'teki yazımda bir nevi javascript yazıyor gibiyiz. key value mantığı gibi bir mantığımız var background: 'red' => Buradaki background özelliği key ve valuesi de 'red' parametresi gibi düşünün.

Özetle;

JSX, React bileşenlerini yazmayı ve anlamayı kolaylaştıran güçlü bir araçtır. XML benzeri sözdizimi ve JavaScript'in gücünü birleştirerek, dinamik ve okunabilir bileşenler oluşturmamızı sağlar. JSX kodunun JavaScript'e dönüştürülmesi süreci, tarayıcıda çalışacak standart bir JavaScript kodu oluşturur. Bu şekilde, geliştiriciler hem rahatça bileşen yazabilir hem de performans açısından verimli uygulamalar geliştirebilirler.

React ekosisteminde JSX ve onun derlenme sürecini anlamak, daha etkili ve modern web uygulamaları geliştirmenize yardımcı olacaktır. JSX'in sunduğu avantajları ve onunla nasıl etkili bir şekilde çalışabileceğinizi öğrendikten sonra, React'te daha karmaşık ve dinamik uygulamalar geliştirmek çok daha kolay olacaktır.