3 Kasım 2017 Cuma

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>
<head>
   <meta charset="utf-8">
</head>
<body id="react-root">
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</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.

Hiç yorum yok:

Yorum Gönder