20 Temmuz 2016 Çarşamba

Adım Adım React

Herkese merhaba,
bu yazımda sizlere React'a başlarken  aldığım notlarımı paylaşacağım.  Aslında hem reactjs ile ilgili hemde diğer konularda bunun gibi aldığım çok fazla notlar var elimde.  Ancak tüm bu notları   detaylı açıklamalarda bulunarak paylaşma planım vardı. Bu sıralar da hem yaz hem iş yoğunluğu nedeniyle  yazmaya  bir türlü fırsat bulamıyorum.  Dolayısıyla bundan sonraki yazılarımı daha sade olarak paylaşacağım. Anlaşılmayan yer olursa altına soru sorarsınız gerekli açıklamaları yaparım. Bu sayede hem ben elimdeki bilgileri arşivlemiş olacağım hemde sizlere kaynak sağlama noktasında katkıda bulunmuş olacağım.

Centos üzerinde nodejs kurulumu ile başlayarak hello world çıktısı oluşturan reactjs adımları aşağıdadır:


1-) Node JS yüklü değilse nodeJs yükle ve proje oluştur.

a-) node yüklü mü kontrol et.

 node -v


b-) node yüklü değilse indir.
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - 


c-) indirme işleminden sonra yükle.

 sudo apt-get install -y nodejs

d-) proje ana dizininde proje bilgileriyle template oluştur.

 npm init

2-)  React ve React-DOM modüllerini yükle

 npm install --save react react-dom

3-) .JSX dosyalarını .JS olarak derlemek için babel yükle
sudo npm install -g babel-cli 

4-) "react.min.js" ve "react-dom.min.js" dosyalarını ana dizine kopyala(indir).


5-) index.html oluştur ve içeriğini güncelle.
a-) ana dizinde  index.html oluştur
touch index.html 


b-) index.html içeriği :

<html>
<head>
<title> isReact </title>
        <!--react-->
        <script type="text/javascript" src="react.min.js"></script>
        <script type="text/javascript" src="react-dom.min.js"></script>

</head>
<body>
<main></main>

<script type="text/javascript" src="app.js" ></script>
</body>
</html> 


6-) ana dizinde .babelrc dosyasını oluştur ve içeriğini güncelle.
a-)  .babelrc dosyasını oluştur

 touch .babelrc



b-) .babelrc içeriği:

{
  "presets": ["es2015", "react"]
}


c-) babel,react ve ecmascript'i development dependency olarak ekle

 npm install --save-dev babel-preset-react babel-preset-es2015

7) app.jsx dosyası oluştur ve içerik ekle.
a-) Ana dizinde app.jsx oluştur
touch app.jsx 


b-) app.jsx içeriği:
var mainEl = document.querySelector("main");

var Sample = React.createClass({
render:function(){
return (<div> Hello wordl from React  component! </div>);
}
});

ReactDOM.render(<Sample/> , mainEl);



8-) babel ile JSX dosyasını derle (js output oluştur)
babel app.jsx  --watch --out-dir . 

9-) index.html dosyasını browser ile aç. Ekranda  "Hello wordl from React  component!" yazısını göreceksiniz.


Hiç yorum yok:

Yorum Gönderme