Levent Yıldız: babelrc

4 Ağustos 2016 Perşembe

Browserify kurulumu ve kullanımı

Merhaba, bu yazımda sizlere javascript dosyalarını başka bir javascript dosyasına import etmek için kullanılan browserify kurulum ve kullanımını paylaşıyorum. Aşağıdaki adımları takip ederek browserify'ı kurup react ve react-dom kütüphanesini JS dosyasına import edebilirsiniz.

1-) browserify'ı yükleyin

npm install -g browserify

2-) react ve react-dom'u yükleyin

npm install --save react react-dom

3- index.html oluşturun

touch index.html

4- index.html içeriği :

<html>
<head>
<title> isReact </title>
</head>
<body>
<main></main>
<script type="text/javascript" src="bundle.js" ></script>
</body>
</html>

5- app.jsx dosyası oluşturun.

touch app.jsx

6- app.jsx dosyasının içeriği:

var React = require('react');
var ReactDOM = require('react-dom');

var mainEl = document.querySelector("main");

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

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

7-) babel ile app.jsx dosyasını app.js'e dönüştürelim

babel app.jsx --watch --out-dir .

8- browserify ile app.js'i bundle.js'e dönüştürelim(bu dönüşümün içinde artık react ve react-dom da var).

browserify app.js > bundle.js

Bu sayede

<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="react-dom.min.js"></script>

şeklinde import ettiğimiz dependency dosyalarını

var React = require('react');

var ReactDOM = require('react-dom');

şeklinde import etmiş olduk.

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.