React Eğitim Serisi – 1: Proje Açmak ve Kurulum
React nedir? Nasıl Kullanılır? React 101 Giriş Eğitimi için Tıklayın!
Evet bu yazıda React ile başlangıç seviyesinde bir projenin temellerini atacağız. React‘ı kurmayı, GitHub ile senkron çalışmayı ve JSX formatına çevirmeyi öğreneceğiz.
İlk olarak C:ProjectReactEgitim klasörümüzü oluşturuyor ve bunun içerisine public ve src diye iki klasör açıyoruz. Daha sonra lokal ortamda çalışabilmek için AMPPS Server ya da Wamp Server kuruyoruz. Ben AMPPS kullanıyorum ve buna göre anlatmaya devam edeceğim. Kurulumu yaptıktan sonra AMPPS‘ı çalıştırıp Apache configuration‘u notepad ile açıp içerisine
<VirtualHost 127.0.0.1:8080> DocumentRoot "C:ProjectReactEgitimpublic" ServerName dev.reactegitim.com <Directory "C:ProjectReactEgitimpublic"> Options FollowSymLinks Indexes AllowOverride All Order deny,allow allow from All </Directory> </VirtualHost>
yazarak dev.reactegitim.com:8080 adresini lokalimizde açtığımız C:ProjectReactEgitimpublic klasörüne yönlendiriyoruz. Bunun haricinde System32/drivers/etc/hosts dosyasına
127.0.0.1 dev.reactegitim.com
satırını eklemeniz gerekiyor.
Daha sonra React’ın source dosyalarını indirmek için buraya giriyoruz ve Download Starter Kit paketini indiriyoruz. İndirdiğimiz dosya içerisinden build klasöründeki react.min.js dosyasını projemizin C:ProjectReactEgitimpublic klasörüne kopyalıyoruz.
Public klasörünün içeriği;
- index.html (Şimdilik boş)
- react.min.js
Src klasörünün içeriği;
- main.js (Şimdilik boş)
Şimdi sıra geldi projemizi GitHub‘a koymaya. GitHub hesabımıza bağlanıp New Repository oluşturuyoruz.
Ben oluşturduğum yeni repositorye ReactEgitim adını verdim, siz dilediğiniz ismi verebilirsiniz. Gizlilik ayarlarını da yaptıktan sonra Create Repository diyerek repositorymizi oluşturuyoruz. Oluşturduktan sonra bize verdiği linki kullanacağımız commit aracına ekliyoruz. Ben SourceTree kullanıyorum size de tavsiye ederim ve anlatımı onun üzerinden gerçekleştireceğim.
Linki kopyalayıp SourceTree‘yi açıp Clone / New butonuna tıklıyoruz.
Source Path kısmına linki yapıştırıyoruz, Destination Path kısmından projemizin bilgisayarımızdaki dizinini gösteriyoruz ve Clone diyoruz.
Evet GitHub bağlantımızı yaptık, proje klasörümüzü oluşturduk ve React için gerekli javascript dosyasını projemize ekledikten sonra şimdi sıra geldi html’imizi ve main.js’imizi oluşturmaya. İlk etapta basit bir saniye sayacı olan ve React’ın düzgün çalışıp çalışmadığını kontrol eden bir uygulama hazırlayacağız.
Public klasörü içerisinde oluşturacağımız index.html’imiz şu şekilde olacak;
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-type' content='text/html; charset=utf-8'> <title>React Proje Açmak ve Kurulum</title> <script src="react.min.js"></script> </head> <body> <h1>React Proje Açmak ve Kurulum Örneği</h1> <div id="container"> <p> React Çalışmıyor! </p> </div> <h4>Evet artık React'ı çalıştırdık. Artık bir proje yapmaya başlayabiliriz. React anlatımlarının devamı çok yakında frontendci.com'da..</h4> <p> React hakkında: <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>. </p> <script src="main.js"></script> </body> </html>
Src klasörüne oluşturacağımız main.js doyamız ise şu şekilde olacak;
var ExampleApplication = React.createClass({
render: function() {
var elapsed = Math.round(this.props.elapsed / 100);
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
var message =
'React ' + seconds + ' saniyedir başarıyla çalışıyor.';
return <p>{message}</p>;
}
});
var start = new Date().getTime();
setInterval(function() {
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
}, 50);ExampleApplication diye bir eleman yaratıp bunun Render fonksiyonuna geçen süreyi hesaplayacak bir matematik işlemi yaptırıyoruz. Daha sonra da sayfanın açılışında start date i alıp her sanise geçtikten sonra new date yaratıp ondan çıkarıyoruz. Sonucu da ekrana basıyoruz. Böylelikle ekran çıktımız “React XX saniyedir başarıyla çalışıyor” şeklinde oluyor.
Evet index.html ve main.js’imizi projemize ekledik ancak React çalışmıyor hatası alıyoruz değil mi hala? Bunun sebebi React’ı JSX formatına dönüştürmemiş olmamız. Bunun için de en başta kısa birkaç işlem yapmamız gerekiyor.
Öncelikle ReactEgitim ana klasörümüzde sol shift tuşuna basılı tutarak sağ klik yapıyoruz ve komut satırını açıyoruz.
Açılan siyah ekranda “npm install -g react-tools” yazıp enter diyoruz.
Daha sonra yine aynı komut satırına “jsx –watch src/ public/” yazarak enter diyoruz. Bu komut src içerisinde ne buluyorsan hepsini jsx formatına çevir ve public klasörüne ekle anlamına geliyor.
Bu komutu çalıştırdıktan sonra komut ekranını açık bırakmanız gerekiyor. main.js dosyasında yaptığınız her değişikliği algılayıp otomatik olarak public klasöründeki main.js dosyanızı güncelliyor ve yazdığınız kodu anında görmenizi sağlıyor.
Evet artık dev.reactegitim.com:8080 adresine girip lokalinizde projenin çalıştığını ve saniye saymaya başladığını göreceksiniz. Yaptıklarınızı tamamladıktan sonra SourceTree‘yi açıp Commit & Push diyerek değişiklik yaptığınız dosyaları GitHub‘a göndermeyi unutmayın.
Benim yazdıklarımı https://github.com/evrenakar/ReactEgitim adresinden indirebilirsiniz.
Bir sonraki React anlatımında görüşmek dileğiyle hoşça kalın.
Yorum yap