React Serüvenim — Hello React

Yeni bir dünyaya merhaba demek …

React serüvenimizde ilk girişleri kurulumlarımızı tamamladıktan sonra hızlıca kollarımızı sıvayabiliriz :) Her uygulama kodlama öğrendiğimizde başladığımızda ilk adım hello world yazdırmaktır rutinleri bozmadan biz de hızlıca bir hello react diyelim 🌸

Kurulumlar kısmında bir proje açarak bu proje üzerinde kısa yollarla html kod blokları ve bloklar ile ilerleme kısmına kadar gelmiştik. Bu adımda o bloklarda react entegre edip ilerleme adımına bakacağız.

Reactjs.org sayfası üzerinden react ile ilgili tüm bilgilere erişebilmekteyiz. İlk adımda açmış olduğumuz ve hali hazırda çalıştığımız sayfamızda reactjs.org sayfasında olan aşağıda belirtilen kod bloğunu almaktayız.

Dokümanlar

JS ile hızlıca hello word yazdırmak için;

var root = document.getElementById('root');
var template = <h1>Helllo React </h1>;

React ;

var root = document.getElementById('root');
var template = React.createElement{
'h1',
null,
'Hello World'
};

ReactDOM.render{template,root};

React bize sanal dom yapısı oluşturmaktaydı, bu sebeple ilgili kısımda h1 etiketleri için tırnak kullanmamıza gerek kalmamaktadır.

İlgili kod blokları ile ilgili kısım aşağıdaki gibidir;

Hello World

Bu yazımızda merhaba dedikten sonra bir sonraki yazımızda babel kullanımı ve dokümanlarından bahsederek sonraki aşamada da koşullu ifadelere geçiş sağlayabiliriz.

Sonraki yazımda görüşmek dileğiyle, sevgiler. 🌸