Tepki JSX

JSX nedir?

JSX, JavaScript XML anlamına gelir.

JSX, React'te HTML yazmamıza izin verir.

JSX, React'te HTML yazmayı ve eklemeyi kolaylaştırır.

JSX kodlama

JSX, HTML öğelerini JavaScript'te yazmamıza ve bunları herhangi bir createElement()  ve/veya appendChild()yöntem kullanmadan DOM'a yerleştirmemize olanak tanır.

JSX, HTML etiketlerini tepki öğelerine dönüştürür.

İşte iki örnek. Birincisi JSX kullanır ve ikincisi şunları yapmaz:

const myelement = <h1>I Love JSX!</h1>;

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

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

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

İlk örnekte görebileceğiniz gibi, JSX, HTML'yi doğrudan JavaScript kodunun içine yazmamıza izin veriyor.

JSX, JavaScript dilinin ES6'ya dayalı bir uzantısıdır ve çalışma zamanında normal JavaScript'e çevrilir.

JSX'teki ifadeler

JSX ile küme parantezleri içinde ifadeler yazabilirsiniz { }.

İfade, bir React değişkeni veya özelliği veya herhangi bir geçerli JavaScript ifadesi olabilir. JSX, ifadeyi yürütecek ve sonucu döndürecektir:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Büyük Bir HTML Bloğu Ekleme

Birden çok satıra HTML yazmak için HTML'yi parantez içine alın:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Bir Üst Düzey Öğe

HTML kodu, BİR üst düzey öğeye sarılmalıdır.

Bu nedenle, iki paragraf yazmayı seviyorsanız , bunları bir öğe gibi bir üst öğenin içine koymalısınız div.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternatif olarak, birden çok satırı sarmak için bir "parça" kullanabilirsiniz. Bu, DOM'a gereksiz yere fazladan düğüm eklenmesini önleyecektir.

Bir parça boş bir HTML etiketine benziyor: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elemanlar Kapatılmalı

JSX, XML kurallarına uyar ve bu nedenle HTML öğeleri uygun şekilde kapatılmalıdır.

const myelement = <input type="text" />;

Özellik sınıfı = sınıfAdı

classNitelik, HTML'de çok kullanılan bir niteliktir, ancak JSX JavaScript olarak işlendiğinden ve anahtar classkelime JavaScript'te ayrılmış bir kelime olduğundan, onu JSX'te kullanmanıza izin verilmez.

JSX bunu classNameyerine kullanarak çözdü. JSX işlendiğinde, className nitelikleri niteliklere çevirir class.

const myelement = <h1 className="myclass">Hello World</h1>;

Koşullar - if ifadeleri

React, ififadeleri destekler, ancak JSX'in içinde değildir.

JSX'te koşullu ifadeleri kullanabilmek için, if ifadeleri JSX'in dışına koymalısınız veya bunun yerine üçlü bir ifade kullanabilirsiniz:

Seçenek 1:

ifJSX kodunun dışında ifadeler yazın :

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Seçenek 2:

Bunun yerine üçlü ifadeler kullanın:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

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