Son yıllarda, Javascript programlama dilinde birçok gelişme yaşamıştır. Bu dilin standartları ECMA organizasyonu tarafından belirlenmektedir. ECMAScript adıyla değişen standartlar tarayıcılar tarafından desteklenmekte ve yeni Javascript versiyonları karşımıza çıkmaktadır. Yalnız şunu unutmayalım, tarayıcı üreticiler bu standartları hemen desteklemez, biraz bekler ve en uygun şekilde tarayıcı özelliklerine katarlar. En son 2015 yılındaki ES6 birçok tarayıcı tarafından desteklenmiştir. Bu destekleme hemen olmaz, örneğin ES6 Edge 2016’da, Chrome 2017 ve Opera ise 2018 yılında destekler durumu gelmiştir. Bu sırada ECMA’da çalışmaya devam etmiş ES7 (2016) ve ES8 (2017) tanıtmıştır ancak şu an itibariyle bu özellikleri kullanan tarayıcı yoktur (Yakın zamanda olabilir:).
Bu hızlı gelişme karşısında gelişmeleri daha hızlı adapte olmak isteyen geliştiriciler olmuştur. Ayrıca yazılan kodların eski tip tarayıcılarda çalışmaması da diğer bir problemdir. Bu durumda geliştiriciler uyumlu Javascript’e dönüştürme işlemini tasarlamışlardır. Üst versiyonlarda yazdığınız bir kodu alt versiyonlara dönüştürebilirsiniz. Babel gibi araçlar bu dönüştürme işlemine imkan sağlar. Facebook’ta React’ı ilk yarattığında, hem bu konuyu dikkate alarak hem de bileşenleri tanımlamak için HTML benzeri bir sözdizimi yaratmıştır. Buna Javascript XML (JSX) demiştir.
Aslında JSX kullanma React için olmazsa olmaz bir durum değildir. JSX olmadan da React kodu yazılabilir ancak kod ayrıntılı ve zahmetli bir hale dönüşür. Ayrıca, Babel gibi ES6 veya üstü bir kodu standart Javascript koduna çeviren araçların çoğu JSX desteği sunar. Şimdi bir JSX kodu görelim:
|
1 2 3 |
<h1> Merhaba JSX Dünyası! </h1> |
Ne oluyor şimdi, bu bildiğin HTML diyenler olmuştur. Aslında, HTML5’ten birkaç noktada ayrılır. Hem HTML hem JSX XML dilini atası olarak kullanır. Ancak JSX biraz daha XML kurallarına bağlıdır. Örneğin img etiketi için HTML kapatma kullanılmayabilir. Örneğin,
|
1 |
<img src="my/image.jpg" > |
Ama JSX etiket içinde de olsa kapatma (“/”) kullanılmalıdır. Örneğin,
|
1 |
<img src="my/image.jpg" /> |
Ayrıldıkları ikinci nokta “class” ifadesidir. HTML’de etiket içine özellik tanımlamak için kullanılan class, ne yazık ki JSX bir Javascript kodu içinde kullanılır. class kelimesi Javascript kodu içinde kullanılabilir ve anahtar bir ifadedir. Ne yazık ki Javascript yorumlamasında iki class’ı ayırmak zordur. Bu yüzden JSX tanımlamasında “className” kullanılır. Örneğin,
|
1 2 |
HTML: <div class="deger"> JSX: <div className="deger"> |
Diğer bir nokta atama işleminde karşımıza çıkar. Örneğin HTML style etiketi içine bir string ifade verilebilir. Anacak Javascript tarafında bu string ifade pek anlam ifade etmez. Tüm özellikleri bir string içine yerleştirmek yerine JSX’de bir Javascript nesnesi içine yerleştirebilirsiniz.
|
1 2 |
HTML: <div styles="background: black; color: white;"> JSX: <div styles={{background: 'black', color: 'white'}}> |
JSX tanımlamasında “{{” iki süslü paranteze dikkat edelim. Dıştaki Javascript işlemi olduğunu belirtirken alttaki parantez Javascript nesnesini işaret eder. Bu parantez olayı yukarıdaki gibi sadece özellik tanımlama için değil Javascript’e her ihtiyaç duyulduğunda kullanılabilir. Örneğin,
|
1 2 |
HTML: <span>Hello World</span> JSX: <span>{'Hello' + 'World!'}</span> |
Artı (+) sayesinde iki string ifade birleştirilmiştir. Bir anlamda Javascript tanımlama geçilmiş olarak görebiliriz.
Son özellik olarak ta HTML’den farklı uygulama tabanlı bileşenler kendine az etiketler kullanabilir. Örneğin,
|
1 2 3 |
<NewsItem> Merhaba React! </NewsItem> |
JSX anladıysak, gelecek bölüme “React bileşenleri” oluşturmaya geçebiliriz.