React & Redux 1

İlk ders: Grekli paketlerin kurulumunu yapacağız ES6 kullanmaya çalışacağız. Diğer tarayıcılarda da geçerli olması adına babel kuracağız.

Projemizi kurmak için yeni bir klasör açıyorum. ReactRedux klasörümün adı visiaul code ile açıp

npm init -y komutlarınını command line 'a giriyorum.
Ardından git init yapıyorum github kullanacam, git init ile kodlarımı versiyonluyorum.


mkdir server komutları ile server klasörümü oluşturuyorum. Cd server yapıp lokasyonumu servera taşıyorum. Ardından index.js dosyamı oluşturuyorum. Bu benim ana giriş noktam. Bu dosyamı aslında Express server koşturmak için kullanacağım. Bunun için ;
 import express from 'express';

 yani express kütüphanemi projeme dahil ettim.
 Bir sonraki adımım express serverımı bir değişkene atayıp bu değişken route oluşturmak. Bu oluşturduğum route klasik olarak Hello word yazdırmak. Ardından ise local hostumun çalışacağı bir port numarası tayin etmek .

import express from 'express';

const app = express();

app.get('/*',(req, res) => {
res.send('hello word');
});

app.listen(3000, ()=>{
console.log('Localhost 3000 on running');
})
index.js son hali.

Şimdi command lineda node index.js yazıyorum. Aşağıdaki hata ile karşılaştım. Bunu çözmek için babel kullanacağız.

npm install --save-dev babel-cli komutları ile babel indiriyorum.
Packpage.json dosyama gelip "scripts" : { in içine "server":"babel-node server/index.js" eklemesini yapıyorum.Configure işlemim bitmedi devam ediyorum. Root dizinime gelip .babelrc dosya oluşturuyorum.
{"presets":["es2015"]} yazıyorum. Bu öncesi için es2015 ihtiyacım olduğunu belirtiyor. Babelın2015 verisyonunuda indirmem gerekli
npm install --save-dev babel-preset-es2015
artık npm run server commandını yazdığımda çalışması gerek.
localhost:3000 portuna girdiğimde hello word yazısı beni karşılar.

Peki html sayfası dönemek isteseydim ?
server dizinime bir html5 sayfası oluşturuyorum. Ardından index.js dosyamda
import path from 'path';
eklmesi,
app.get('/*',(req, res) => {
res.sendFile(path.join(__dirname, './index.html'))
});
değişkliğini yapıyorum.

Değişikliklerimin otomatik algılanması için ;
npm install --save-dev nodemon kütüphanesini ekliyorum ve packpage.json dosyamda
"server":"nodemon --watch server --exec babel-node -- server/index.js"
değişikliğini yapıyorum.
Tekrar npm run server komudunu yazıyorum. Artık değişikliklerim otomatik geliyor.
Ardından .gitignore dosyamı oluşturum.
içine
.DS_Store
node_modules
yazıyorum. Bu dosyların uzak sunuculara atılmasını istemiyorum çünkü.
Bu ders için son olarak
git aa
git commit -m'initial commit'
yazıp versiyonlama işlemimi bitiriyorum.

Projenin github linki : https://github.com/abdullahsuhaisk/ReactRedux.git

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

React JS Yazalım 1

Resim
Parent componentini Child1 ve Child2 componenti ile güncelleyelim. Reactda state güncelleme işlemi yapacağız. Parent componentim name ve password alanlarımdan oluşuyor. Name inputum child1 componentimde. Password inputum ise  child2 componentimde. Yavru komponentlerimin state tutmadan direk ata komponentimi güncellemelerini istiyorum bunun içinde iki tane yöntem ile yapabilirim 1. yöntem parent komponentimde child komponentimi çağırırken props olarak parent komponentimin methodunu child komponentime göndermem. 2. yöntem ise üst scope da method tanımlayıp bunu child komponentimde ulaşmak. import React , { Component } from " react " ; class Child1 extends Component { render () { this . state = { name : "" } return ( < div > < label > Name: </ label > < br /> < input type = " text " placeholder = " Name " onChange = { e => this . prop...
Devamı

Heroku deploy

Resim
   Heroku da github, bitbucked gibi kodlarınızı depolayabileceğiniz external git servisi, herokunun bir diğer güzelliği ise kodlarını derleyebilirsiniz.   Kodlarınızı derleyebilmeniz için bir kaç işlem yapmanız gerekli, benim derleme yapacağım kodlarım. NodeJs kullanarak yazılmış arka taraf ile ReactJs kullanılarak yazılmış öntaraftan oluşan fakat her iki sisteminde aynı yerde kullanılmasından dolayı tek taraflı bir derleme işlemi diyebiliriz.   Kısaca sistemi anlatmak gerekir ise NodeJs ve React kullanarak Blog sitesi kuruyorum. Amacım daha önce öğrendiklerii pekiştirmek öğrendiklerime yenilerini katmak ve güzel bir boilerplate hazırlamak. Sistemimin dizin yapısı Blog/Server/Client Server main klasörüm içinde NodeJs yani back-end tarafım var. Serverın içinde ise Client var. Yani token tutmama gerek kalmıyor. İlk olarak Server ın içinde ki packpage.json na aşağıdaki kodları ekliyorum "engines" : { "node" : "8.1.1" , "npm" ...
Devamı

Laravel & React 4

Resim
Bu bölümde axios ile api ya ulaşıp http istekleri yapacağız. Yeni bir component oluşturup. Constructarda bir initial state tanımlayıp componentwillMount yaşam döngüsü ile state mizi dolduracağız. D:\WorkSpace\Tutorals\Laravel\react-lara> npm install axios --save Komutu ile öncelikle projemize axios kütüphanesini dahil ediyoruz. Ardından yeni bir component oluşturuyoruz. Constructor methodumda initState yi tanımlıyorum. constructor (){ super (); this .state = { blog :[] } console . log ( super ()); } ardından Componentwillmount ile apimıza istek atacağız. Bu method hem server hemde client oluşturulmadan önce çalıştırılır. ComponentDidMount ise ilk çalışmanın ardından sunucu tarafından çalıştırılır. componentWillMount () { axios . get ( '/api/blog' ). then ( response => { this . setState ({ blog : response .data }) }). catch ( err => { ...
Devamı