Bir önceki tutorialde isim kayıt formumuzu önce düz html ile sonra pure javascript ve react ile yaptık. Bu tutorialde aynı sayfayı JSX ve babel kullanarak oluşturacağız.
JSX Nedir:
JSX önceki tutorialde yazdığımız React.createElement(“label”, {id:”etiket1″, for:”kutucuk1″}, “Adınız” ) tarzı kodları XML veya HTML benzeri bir yapıyla daha basitçe yazmamızı sağlayan bir teknolojidir.
Babel Nedir:
Babel projeye dahil ettiğimizde arka planda pasif olarak çalışan bir kütüphanedir. Giriş ve orta düzey geliştiricileri projeye dahil etmek dışında pek kafa yormalarına gereken bir şey değildir. Özetle JSX ile yazılan kodları arka planda yalın javascripte çevirir. Yani ilk tutorialde yazdığımız formatı bizim yerimize yazar.
Aşağıdaki örnekte babel kullanarak önceki tutorialde yaptığımız basit formu tekrar oluşturuyoruz.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script> | |
| <script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> | |
| <script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> | |
| </head> | |
| <body> | |
| <div id='root'> | |
| </div> | |
| <script type="text/babel"> | |
| ReactDOM.render( | |
| <div id='root'> | |
| <label id='etiket1' for='kutucuk1'>Adınız</label> | |
| <input id='kutucuk1' type='text'></input> | |
| <button type='button'>Kaydet</button> | |
| </div> | |
| , | |
| document.getElementById('root') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Dikkatli incelersek 6. satırda babel librarysini projeye dahil ediyoruz. 16. satırda script type olarak “text/babel” yazıyoruz. Böylece tarayıcı yazdığımız şeyin normal javascript değil JSX olduğunu anlamış oluyor. 17. satırda öbür örneklerde olduğu gibi reactDom.render ile başlıyoruz ve içerisine düz HTML taglerine benzer şeyler yazıyoruz.
Bu kodu çalıştırdığımızda babel bizim için bu tagleri React.createElement(… benzeri yapıya çeviriyor ve kullanıcıda çalıştırılıyor. Yeni bir html dosyasına kodları yapştırdığınızda önceki tutorialdekinin aynısı bir sayfa yarattığımızı görmüş oluyorsunuz.
Kodun çalışan hali için aşağıdaki codepen panelini kurcalayabilirsiniz.
Sonuç olarak JSX aslında reactı bizim daha aşina olduğumuz bir yazma ortamına çeviriyor. İki yapının da kendine has artıları veya eksileri var.
Bu yolda ilerleken internette kurcalayacağınız kaynakların pek çoğu sizi JSX’e itecektir. Zorunlu değilsiniz ama ne kadar çok kaynak o kadar kolaylık gibi düşünüyorum.
JSX’te parent child ilişkilerini kurmak, mevcut html kodlarını reacta çevirmek daha kolay ama javascript çerçevesinin dışına çıkıp yeni birşey öğrenmek zorunda kalıyorsunuz. Ayrıca sürekli aradaki babele bağlısınız. Babelin kusursuz çalışmadığı durumlar olabiliyor yeni versiyonlarda bugar gideriliyor vs…
Benim bu konuda son kararım bundan sonraki tutorialleri yazarken JSX ile ilerlemek yönünde.
Dipnot olarak bu noktaya kadar hep html ve javascripti aynı dosyada iç içe yazdım. Bu şekilde yazıldığında yeni başlayanlar için kafada bütün resmi çizmek daha kolay oluyor. İlerleyen tutoriallerde yapının karışıklaşması sebebiyle okunaklılığı baltalamamak adına dosyaları ayıracağım muhtemelen. Belli noktalarda css’i de dahil edeceğimiz için uzun kod blokları can sıkabilir.
mynslog 