Levent Yıldız: Adım Adım React

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>

<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.

Levent Yıldız

20 Temmuz 2016 Çarşamba

Adım Adım React

Hiç yorum yok:

Yorum Gönder