React ve JSX
Published in
3 min readOct 8, 2022
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