Levent Yıldız: react-native-web ile native uygulamayı web projesi olarak çalıştırma

Herkese merhaba, bu yazımda sizlere react native ile geliştirdiğimiz projeyi web projesi olarak çalıştırmayı anlatacağım. Aslında genelde önce web projeleri yazılır daha sonra da cordova gibi araçlarla web projeleri hybrid uygulamalara dönüştürüldü. Biz burada tam tersini yapacağız. Yani react native ile bir proje oluşturacağız ve daha sonra da aynı kodları web sayfasında görüntüleyeceğiz.

Bu yaklaşım size biraz garip gelebilir ancak daha şimdiden dünya genelinde bu yaklaşımın popülaritesi artmaya başladı ve aralarında twitter'ın da bulunduğu saygın firmalar bu şekilde geliştirmelerine başladı bile.. Her neyse konuyu dağıtmadan aşağıda adım adım paylaşıyorum:

DemoProject adında bir dizin oluştun ve bu dizinin içine girin

$ mkdir DemoProject && cd DemoProject

npm ile proje oluşturun. Burada web tarafı için çalışıyoruz şuan.

$ npm init DemoProject

Package.json dosyasının içeriğini aşağıdaki gibi düzenleyin
Burada en kritik kısım dependencies kısmıdır. Buraya dikkat edin.

{

"name": "DemoProject",
"version": "1.0.0",
"description": "Sample web and native applocation ",
"main": "index.js",
"scripts": {
"test": "-"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-native-web": "0.0.112",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1",
"babel-cli": "^6.24.1"
}
}

package json dosyasını güncelledikten sonra yarn'ı çalıştır.

$ rm -rf ./node_modules && yarn

yada yarn yoksa npm ile bağımlılıkları kurun.

$ rm -rf ./node_modules && npm install

webpack config dosyası oluşturun

$ touch webpack.config.js

webpack.config.js dosya içeriği aşağıdaki gibi olmalıdır.

module.exports = {

entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}
]
},
resolve: {
alias: {
"react-native": "react-native-web"
}
}
};

Native ve Web kodlarımız arasında köprü görevi görecek olan entry.js dosyasını oluşturun

$ touch entry.js

entry.js'in içeriği aşağıdaki gibi olmalıdır

document.write(require('./DemoNativeApp/index.android.js'));

index.html dosyası oluşturun

$ touch index.html

index.html 'in içeriği aşağıdaki gibi olmalı

<html>

DemoNativeApp adında react native projesi oluşturun. Bu kısım native geliştirme içindir.

$ react-native init DemoNativeApp

index.android.js dosyasının en altına aşağıdaki satırları ekleyin
Burada index.html dosyasındaki react-root ID'sine native den web'e dönüşecek içeriği yazacağız.

if (window.document) {
AppRegistry.runApplication('DemoNativeApp', {
initialProps: {},
rootTag: document.getElementById('react-root')
});

}

native proje dizinine gidin

$ cd DemoNativeApp

Native projeyi Android emulator ile çalıştırın

$ react-native run-android

Daha sonra kök dizinde webpack ile web tarafını çalıştırın

$ webpack-dev-server

browser üzerinden (http://localhost:8080/webpack-dev-server/) adresine giderek projenizin web tarafını görebilirsiniz.

Bu aşamadan sonra projenizin kaynak kodlarına yapacağınız müdahaleden iOS,Android gibi web tarafı da etkilenecektir. Yani bir yerde yazdığınız kod 3 platformda da çalışmış olacaktır.

Levent Yıldız

3 Kasım 2017 Cuma

react-native-web ile native uygulamayı web projesi olarak çalıştırma

Hiç yorum yok:

Yorum Gönder