JSX Nedir
JSX Nedir (image : https://dev.to/ark7/what-is-jsx-5f60)

JSX (JavaScript XML), React’te kullanılan ve HTML benzeri bir sözdizimine sahip özel bir yapıdır. JavaScript ile birlikte kullanılır ve bileşenlerin yapısını daha okunabilir hale getirir. JSX, HTML ve JavaScript’i birleştirir, bu sayede bileşenlerin nasıl görüneceğini ve davranacağını aynı kod bloğu içinde tanımlamanızı sağlar.

JSX’in Özellikleri:

  1. HTML Benzeri Sözdizimi: HTML etiketlerine benzeyen bir yapı kullanır, bu da kullanıcı arayüzünü tanımlamayı kolaylaştırır.
  2. JavaScript ile Entegre: JSX, JavaScript ifadelerini doğrudan kullanmanızı sağlar. Dinamik içerikler veya hesaplamalar için {} süslü parantezler kullanılır.
  3. React.createElement Alternatifi: JSX, arka planda React.createElement() fonksiyonuna dönüştürülür. Bu da elle element oluşturma yerine daha temiz ve anlaşılır bir kod yazmanızı sağlar.

Aşağıda HTML, Javascript ve JSX (React) için örnekler verildi. Açıkça farklarını ve yapılarını görebilirsiniz.

1.HTML (Statik)

HTML’de, sayfayı statik olarak yazarız. Dinamik bir etkileşim sağlamak için Javascript’e ihtiyaç duyarız.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <button onclick="alert('Button Clicked!')">Click Me</button>
</body>
</html>

2.JavaScript (Vanilla JS – DOM Manipülasyonu)

JavaScript’te, sayfada dinamik bir etkileşim sağlamak için DOM manipülasyonu yaparsınız. HTML yapısını JavaScript kodu ile oluşturabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Example</title>
</head>
<body>
  <div id="root"></div>

  <script>
    // HTML elementlerini dinamik olarak oluşturalım
    const root = document.getElementById('root');

    const heading = document.createElement('h1');
    heading.textContent = 'Hello, World!';

    const button = document.createElement('button');
    button.textContent = 'Click Me';
    button.onclick = function () {
      alert('Button Clicked!');
    };

    // Elementleri root'a ekleyelim
    root.appendChild(heading);
    root.appendChild(button);
  </script>
</body>
</html>

3.JSX (React)

JSX, React ile birlikte kullanılır ve hem HTML’in yapısına benzeyen bir yapı sunar hem de JavaScript içinde HTML benzeri yazmanıza olanak tanır.

function App() {
  //Buraya JS kodlarımızı yazıyoruz. Return içine JS yazılmaz! 

  const name = "Huseyin";

  //JS'de tanımlanan veya olan değişkenleri HTML içine yazarken {} süslü parantezler arasında tanımlama yapıyoruz ve değişkeni arasına yazarak kullanıyoruz. İşte bu işleme JSX deniyor. JS + HTML = JSX :)

  return (
    <div>
      <h1 className="title">Hello, {name}</h1> //Çıktısı => Hello, Huseyin
    </div>
  );
}
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={() => alert('Button Clicked!')}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Burada farklı bir karşılaştırma yaparak JS ve JSX yapılarının farklarını anlamaya çalışacağız. JS’de bir element oluşturup, özellikler vermek istediğimizde aşağıdaki gibi yapıyoruz.

const h1 = document.createElement("h1")
h1.textContent = "Hello world"
h1.className = "header"
console.log(h1)

Ancak aynı işlemi JSX ile yapmak istediğimizde HTML ile JS kodlarını iç içe kullanarak daha rahat ve kolay bir şekilde kod yazabiliyoruz. Aşağıdaki JSX kodu ile yukarıdaki Vanillia JS aynı işlemi yapıyor.

const element = <h1 className="header">This is JSX</h1>
console.log(element)

ReactDOM.render(element, document.getElementById("root"))

Yukarıdaki JSX kodunun console.log çıktısı aşağıdaki gibidir. Biraz inceleyelim. Bu yapı işimize tüm React öğrenim ve kullanım anlarımızda işimize yarayacak ve yoğun bir şekilde kullanacağız.

{    
  type: "h1",
  key: null,
  ref: null,
  props: {
    className: "header",
    children: "This is JSX"
  },
  _owner: null,
  _store: {}
}

Burada not olarak tekrar belirtmek gerekir ki; render içinde dönen eleman tek bir parent olmalı. Bu kısımda 2 tane sibling kullanamıyoruz, hata alırız. Render sonrasında 1 ana eleman olmalı, diğer elementler bu ana elemanın içinde yer almalı. Aşağıda bununla ilgili bir örnek bulacaksınız.

const page = (
  <div>
    <h1 className="header">This is JSX</h1>
    <p>This is a paragraph</p>
  </div>
)

console.log(page)
ReactDOM.render(page, document.getElementById("root"))

//CONSOLE ÇIKTISI

{
 type: 'div', 
 key: null, 
 ref: null, 
 props: {
  children: [
    {
      type: 'h1',
      key: null,
      ref: null,
      props: {
        className: 'header',
        children: 'This is JSX'
      },
      _owner: null,
      _store: {}
    },
    {
      type: 'p',
      key: null,
      ref: null,
      props: {
        children: 'This is a paragraph'
      },
      _owner: null,
      _store: {}
    }
   ]
  },
 _owner: null,
 _store: {}
}

Başka bir örnek olarak bir navbar oluşturuyoruz.

const navbar = (
    <nav>
        <h1>website</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

ReactDOM.render(navbar, document.getElementById('root'))

Umarım açıklamalar ve örneklerle sizler de anlamışsınızdır. Lütfen anlamadıysanız hangi kısımlarında sorun yaşadığınızı yorumlarda belirtiniz veya başka kaynaklardan da kendiniz destekleyiniz ve burada eksik olan konuları yine yorumlarda belirterek bizlere de yardımcı olabilirsiniz.

Farklar:

  1. HTML: Sayfa statiktir, dinamik işlem yapmak için ekstra JavaScript kullanmanız gerekir. onclick gibi HTML’de yerleşik olaylarla etkileşim sağlanabilir, ancak sınırlıdır.
  2. JavaScript (Vanilla JS): Dinamik yapı oluşturmak için saf JavaScript kullanılır. HTML yapısını oluşturmak ve manipüle etmek için createElement, appendChild gibi DOM manipülasyon fonksiyonları kullanılır. Ancak, bu yöntem uzun ve karmaşık yapılar için daha zor hale gelir.
  3. JSX (React): Hem HTML hem de JavaScript’i birleştirir. Bileşen tabanlı bir yaklaşım sunar ve daha okunabilir ve yönetilebilir hale getirir. JSX, HTML gibi görünür, ancak JavaScript gücünü de kullanarak daha dinamik ve modern bir yapı sunar.

JSX, React’in sunduğu avantajlarla birlikte, dinamik ve büyük projeler için daha kolay bir geliştirme süreci sağlar.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.