React & Redux 2

Bu başlığımızda React tarafına değinelim. Herşeyi kendimiz sıfırdan yapacağız.
Öncelikle daha öncededn oluşturduğumuz index.html sayfasında react tarafından render edilecek bölümü oluşturalım.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
App id li div sürekli reac tarafından manipüle edilecek aslında klasi javaScript gibi :)

Anadizinimizde client klasörünü oluşturalım ve içine index.js dosyamızı oluşturalım.
import React from 'react';
import { render } from 'react-render';
import App from './components/App';

render(<App />, document.getElementById('app'));
kodları index.js içine yazıyorum.

Şimdi components klasörünü oluşturup App componentini oluşturmam lazım.
import React from 'react';

export default () => {
return (
<h1> Thats class base React Component </h1>
)
}
Burada function base diye tabir edilen bir fonksiton component oluşturduk.

şimdi npm modullerimi indiriyorum

npm install --save react react-dom

Şimdi Html pageme kodlarımı bundle edecek sistem lazım. index.htm sayfama geliyorum ve
<script src ="bundle.js"> yazıyorum. Webpack aracılığı ile bütün şeyleri bundle edeceğim.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="app"></div>

<script src="bundle.js"></script>
</body>
</html>
index.html imin son hali.

Express serverıma webpack ekliyorum. Aslında buradaki configure işlemleri biraz ezber.

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config.dev'; //Root folderdan alıyoruz.

app.use(webpackMiddleware(webpack(webpackConfig))) Middleware parametre olarak compiler istiyor.
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';

import webpackConfig from '../webpack.config.dev';

const app = express();
app.use(webpackMiddleware(webpack(webpackConfig)));

app.get('/*',(req, res) => {
res.sendFile(path.join(__dirname, './index.html'))
});

app.listen(3000, ()=> console.log('Localhost 3000 on running'));
Yukarıdada belirtiğim gibi root dizine webpack.config.dev dosyasını oluşturuyorum;

import path from 'path'
import webpack from 'webpack';

export default {
  devtools: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [
          path.join(__dirname, 'client'),
          path.join(__dirname, 'server/shared')
        ],
        loaders: [ 'react-hot', 'babel' ]
      }
    ]
  },
  resolve: {
    extentions: [ '', '.js' ]
  }
}
npm install --save webpack webpack-dev-middleware
npm install --save babel-loader

bablrc dosyamı
{
"presets":["es2015","react"]
}
düzenliyorum ve
npm install --save-dev babel-preset-react

Sunucumuzun hotreolading de yapması lazım. Yani herhangibi değişiklik olduğunda sayfayı yenilemeden değişikliklerin tarayıcıya yansıması bunun için index.js deki değişiklikler şu şekilde:

Bütün webpackMiddlewares ler browser ile wepback arasında bağlantı yaratmaya yarar.

npm install --save-dev react-hot-loader
webpack-hot-middleware

Yaptıktan sonra sitemiz çalışması gerekiyor.
{
"name": "reactreduxtutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "nodemon --watch server --exec babel-node -- server/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"nodemon": "^1.9.2",
"react-hot-loader": "^4.3.6",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.5.0",
"react-dom": "^16.5.0"
}
}
Son olarak packpage dosyam.
import path from 'path'
import webpack from 'webpack';

export default {
devtools: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, '/client/index.js')
],
output: {
path: '/',
publicPath: '/'
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
include: [
path.join(__dirname, 'client'),
path.join(__dirname, 'server/shared')
],
loaders: [ 'babel' ]
}
]
},
resolve: {
extentions: [ '', '.js' ]
}
}
ikinci loaders den reactı kaldırdım. Artık anlık değişimlerle ilgiliydi bir hata yaşadık şimdilik gerek yok zaten.

App.js dosyam method base componenti yani kodlarımda herhangibi bir değişiklik olduğunda sayfayı yenilemeden sayfam yenilenmiycek.Eğer class base olsaydı render methodumda herhangibi bir değişiklik olduğunda sayfamı yenilemeden sayfam yenilenecek.

Şimdi App.js dosyamı class component haline getirelim ;
import React from 'react';

class App extends React.Component {
render() {
return (
<h1> !Thats class base React Component </h1>
)
}
}
export default App;
React.Component den component classımı türettim. Şuanlık loaders 'im sıkıntılı olduğu için değişiklikler otomatik gelmedi normalde class komponentlerde save ettiğimiz zaman gelmesi gerekir.

Şimdi App.js componentimizden başkar bir component çağıralım. Greetings componentini çağırıyorum.
import React from 'react';
import Greatings from './Greatings';

class App extends React.Component {
render() {
return (
<Greatings />
)
}
}
export default App;

Şimdi Greetings  componentimi tasarlıyorum. Top yani en üst componentiminin class base olmalı onun altındaki componentler method base olabilir.
import React from 'react';

export default () => {
return (<div>hi</div>);
}
Ekranda sadece hi gözükmeli. Bu dersimiz buraya kadar :)

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 1

Resim
    Bu seride back-end tarafında php Laravel kullanan Front-End tarafın da ise React kullanan bir uygulama geliştireceğiz.   Öncelikle php kullanabilmemiz için yani php kodlarını local bilgisayarımızın derleyebilmesi için php server kurmamız gerekiyor. Bunun için Xamp kullanabiliriz. Xamp Adresi:  https://www.apachefriends.org/tr/download_success.html  JavaScript tarafında bu işlemi Node Js ile yapıyorduk. Burada Xamp İle yapacağız. Xampı kurarken kurduğunuz diskte anadizini seçmeyi unutmayın.  Daha sonra composer yüklememiz gerekiyor. Bu paket yükleyicisi tıpkı bizim JavaScripte kullandığımızı npm(node packed manager) gibi. Composer yüklemek için : https://getcomposer.org/download/ Composer 'ı kurarken kurulum yaptığınız yerin xampın içindeki php olmasına dikkat edin. Composer'i kurduktan sonra artık Command Line 'ımıza Composer komutları yazabileceğiz. Şimdi cmd imizi açalım ve bilgisayarımıza global Laravel 'i yükleyelim. Komutlarım : ...
Devamı

React ile Kişisel Blog Sayfası Oluşturma 1

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması. Blog adında bir klasör oluşturun içine Server  klasörü ve : npm create-react-app Client komutlarını yazın.  Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak. Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız. Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum.  src/component/Header.js import React , { Component } from 'react' ; class Header extends Component { render (){ return ( < div > Header </ div > ) } } export default Header ; src/component/Landing.js import React , { Component } from 'react' ; class Landing extends Component { render () { return ( < div > AnaSayfa diyelim mi bea </ div > ) } ...
Devamı

Github' a proje atma (Visual Studio Code ile)

Resim
Öncelikle bir github hesanızın olması ve giriş yapmış olmanız gerekmekte. Giriş yaptıktan sonra Sol taraftan New seçilir.  Repository name Hangi isim ile tutulacağıdır. Description ise açıklama alanı create repository Dediğimizde yeni bir repository alanı oluşur. Açılan Açılan bu sayfada ki böülüm hangi yol haritasını izlememiz gerektiğini bize söyler; …or create a new repository on the command line echo "# PersonelBlogWithReactAndExpress" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/abdullahsuhaisk/PersonelBlogWithReactAndExpress.git git push -u origin master commend line kısmına sırası ile şu adımlar izlenir: Benim kullanı git init => projemize .git adında dosya kurar yapılan değişiklikler düzenlenmeleri vs kaydeder. git add . => Canta gibi düşünüyorum ben bunu yapılan değişikliklerimi çantama ekliyorum. git commit -m "Commite isim ver" => Daha...
Devamı