Bu yazımda hiç yorum yapmadan doğrudan kod işine dahil olmak istiyorum sonrasında işin geyik kısımlarına devam ederiz. Birlikte JSX, Babel, NPM,nodejs gibi kavramlar olmadan basit bir react örneği yapalım.
Öncelikle bilgisayarınızın masaüstünde çalışmalarımızı saklayacağımız react_xyz1 isimli bir klasör oluşturalım. Klasör içerisinde deneme1.html isimli bir text dosyası oluşturalım.
Oluşturacağımız sayfa basit bir label, textbox ve düğmeden ibaret düz html sayfası. Aşağıda gördüğünüz kodu deneme1.html içerisine kaydedin ve çalıştırın.
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"> | |
| </head> | |
| <body> | |
| <div id='root'> | |
| <div id='sayfam'> | |
| <label id='etiket1' for='kutucuk1'>Adınız</label> | |
| <input id='kutucuk1' type='text'> </input> | |
| <button id='dugmecik1' type'button'>Kaydet</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Çalışan örneği aşağıda inceleyip sağ üstteki Edit On Codepen linki ile değişiklikler yapabilirsiniz.
Şimdi aynı sayfayı react kullanarak oluşturalım.
Aşağıdaki kodu yeni oluşturacağınız deneme2.html içerisine yapıştırıp çalışmasını gözlemleyebilirsiniz.
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> | |
| </head> | |
| <body> | |
| <div id='root'> | |
| </div> | |
| <script> | |
| ReactDOM.render( | |
| React.createElement("div", {id:"sayfam"}, null , | |
| React.createElement("label", {id:"etiket1", for:"kutucuk1"}, "Adınız" ), | |
| React.createElement("input", {id:"kutucuk1"}, null), | |
| React.createElement("button", {id:"dugmecik1", type:"button"}, "Kaydet") | |
| ), | |
| document.getElementById('root') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
HTML taglerini doğrudan yazmak yerine React.createElement fonksiyonuna parametre gibi gönderiyoruz. (Pek çok tutorialde daha yaygın olarak JSX ve babel vasıtasıyla html XML tagı yazar gibi yazmak anlatılıyor ama öncelikle bu yapıyı bilmezseniz tam anlamıyla react öğrenemezsiniz. Daha sonraki yazılarda JSX ve babele de değineceğim)
(satır 2-6) <head> tagı içerisinde react kütüphanelerine referans veriyoruz. Böylece sayfamıza dahil olmuş oluyor. Bu dosyaları bilgisayarınıza indirip bilgisayarınızdan da referans verebilirsiniz.
(satır 10-13) Önceki örnekte de tanımladığımız div tagı(root) burada da tanımladık ama bu sefer sadece reacta hedef verme amaçlı kullanıyoruz. Yani diyoruzki sen bu divi bul ve oraya yerleş. Bu div dışında düz html ile yazmamız gereken başka bir durum olmaması gerekiyor normalde.
(satır 15-28) Ve sonunda birazcık react 🙂 <script> tagıyla başladık ve html sayfamıza bu kısımlarda javascript yazacağımızı belirttik.
(satır 16)React komutlarını ReactDOM üzerinden veriyoruz. En çok kullanacığımız ve hayatı başlatan komut render. Render içerisinde yaratmak istediğimiz html’i javascript ile tasarlıyoruz. Sonrasında sayfada güncelleme yapacağımız zaman tekrar tekrar render ediyoruz.
(satır 18) Burada sayfam isimli <div>’i tanımladık. React için bu parent objedir. Burada bulunan <div> tagının içerisine yazılacak olan her alt tag react jargonunda child olarak geçer. Satır 20,21,22 içerisinde çağırdığımız React.createElement fonksiyonlarına dikkatli bakarsanız bunların birbirinden bağımsız değil satır 18‘ in son parametresi içerisinde çağırdığımızı görebilirsiniz. Satır 18‘in parantezini satır 24‘te kapamışız. Parent child ilişkisi bu şekilde sağlanmış oldu.
Çalışan örneği aşağıda görüntüleyip üzerinde denemeler yapabilirsiniz. Kodu bilgisayarınızda veya codepen üzerinde çalıştırdıktan sonra kaynağına baktığınızda aslında oluşan html’in hiç bir farkı olmadığını görebilirsiniz.
Bir sonraki tutorialde JSX ve babel ile aynı sayfayı tasarlıyoruz
Önceki tutoriale aşağıdaki linkten erişebilirsiniz.
mynslog 