React ve JSX

JSX nedir?

• JSX, Javascript XML anlamına gelir.
• JSX, React kodları içerisinde HTML’e çok yakın bir syntax ile kod yazabilmemizi sağlar.
• JSX ile birlikte HTML öğelerini; createElement(), appendChild() gibi JavaScript yöntemleri kullanmadan DOM’a yerleştirebiliriz.
• React’da JSX kullanımı zorunlu değildir ancak kolaylık ve hız sağladığı için büyük çoğunluk tarafından tercih edilir.

Aşağıdaki iki örnek JSX kullanarak ve kullanmadan HTML etiketi oluşturmanın farkını göstermektedir.

JSX’in Özellikleri

• JSX kodları içerisinde curly brackets ‘{ }’ kullanarak JavaScript ifadeleri yazabilirsiniz.

• JSX ile birden çok satır HTML kodu yazılabilir ancak bunlar tek bir ana ebeveyn etikete sahip olmalıdır. Ayrıca parantez içine alınmaları zorunlu değildir.

• JSX’de tek bir ana kapsayıcı etikete sarma zorunluluğu bazen gereksiz etiketler yazmak zorunda bırakabiliyor. Bu durumu aşmak için fragment adı verilen ‘<></>’ boş etiket işaretleri, kapsayıcı olarak kullanılabilir ve DOM’a fazladan bir etiket eklenmemiş olur.

• JSX’de katı HTML kurallarına uyulması gerekir. Bu sebeple tüm etiketler kapatılmalıdır. Bu kurala kapanış etiketi bulunmayan input gibi etiketler de dahildir ve bu etiketler aşağıdaki gibi kapatılmalıdır.

• HTML’deki bazı öznitelikler (attributes) JavaScript içerisinde rezerve kelimeler olduğu için farklı şekillerde yazılmalıdır. Bunlardan bir kaçı aşağıdaki görselde verilmiştir.

• JSX ile birlikte koşullu ifadeler iki şekilde kullanılabilir. Birincisi JSX’den önce koşullu işlemler yapılır ve sonuç JSX’de kullanılır. İkincisi ise ternary yani üçlü operatör ile yapılır.

• JSX içerisine yorum satırı eklemek için önce curly brackets ile JavaScript yazılabilir bir alan oluşturulur sonra da JavaScript’de olduğu gibi yorum satırı eklenir.

• JSX ile birlikte satır içi CSS aşağıdaki gibi kullanılabilir. JSX içerisinde CSS özellikleri kullanırken iki kelimeye sahip background-color gibi CSS özellikleri camelCase yöntemiyle backgroundColor şeklinde yazılmalıdır. Ayrıca birim yazılmayan sayı değerleri otomatik olarak px olarak algılanır.

Tüm yazılarımın kategorize edilmiş bir listesine aşağıdaki linkten erişebilirsiniz.
https://github.com/oguzhanuyanik-sr/articles