Cross platform uygulama geliştirmek istediyseniz mutlaka React Native’i duymuşsunuzdur. React Native ile Android, IOS, Windows, Mac ve Linux uygulamaları geliştirmeniz mümkün. Peki ya size React Native ile artık web siteleri ve web uygulamaları geliştirebileceğinizi söylesem ?

Necolas adında bir geliştirici Github üzerinden erişime açtığı proje ile bizlere React Native ile geliştirilen projeleri hiçbir değişiklik yapmadan direkt olarak web üzerinde çalıştırmamıza imkan veriyor. Üstelik bu projeyi production seviyesinde kullanan çok büyük firmalar var. Bunlardan bazıları Twitter, Uber, The Times Gazetesi’dir. Peki böylesine yeni bir teknolojiyi production seviyesinde kullanmak ne kadar sağlıklı olur derseniz bazı konularda çok hızlı ve sağlam ilerleyebileceğinizi ancak bazı konularda da başınızın çok ağrıyacağını söyleyebilirim.

 

React Native Web ile birlikte HTML Etiketleri Kullanabilirsiniz !

Belki de bu projeye bu kadar destek verilmesinin en büyük sebeplerinden biri de bu. Html etiketlerini ve web javascript ile react.js’i beraber kullanabiliyoruz. Bize bu imkanı veren şey aslında şu; React Native Web, React tabanlı çalışıyor ve React ile hepimizin bildiği standart html etiketleri kullanılabiliyor. Aslında React Native Web, React Native componentlerini React’a dönüştürüyor ve böylece projemiz çalışmaya başlıyor.

 

İlk Hedef Performans

Yukarıdaki dönüştürme işlemleri okuduktan sonra performans konusunda kaygılanmaya başladıysanız korkmanıza gerek yok çünkü bu dönüştürme işlemleri tarayıcınızla sayfayı yüklediğiniz zaman olmuyor. Öncelikle siz kodunuzu yazıp projeyi geliştiriyorsunuz, daha sonra projeyi build ediyorsunuz ve karşınıza web sitenizin build edilmiş hali geliyor.

 

 

 

Nasıl Bir Proje Oluşturabilirim ?

Öncelikle bilgisayarınızda Node >= 8.10 ve npm >= 5.6 sürümlerinin yüklü olması gerekir. Bunları yükledikten sonra komut satırında npx create-react-app my-app ile my-app isminde bir react projesi oluşturuyoruz. Daha sonra oluşturduğumuz projenin içine cd my-app ile giriyoruz. Şimdi ise asıl önemli kısım olan react-native-web’i yükleyeceğiz. Bunun için proje dizininde iken komut satırından şu komutu giriyoruz: npm install react-native-web Bu işlemden sonra kodları yazmaya geçebiliriz.

 

Kodları Yazmaya Başlayalım

İlk olarak projeyi npm start komutu ile başlatalım. Daha sonra src/App.js dosyasını açalım. Bu dosyada şu anda React’ın default olarak oluşturduğu kodlar bulunmakta. Bu kodları temizleyelim ve React Native kodları yazmaya başlayalım. Basit bir örneği aşağıya bırakıyorum:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class App extends Component{
  render(){
    return(
      <View style={{flex: 1, backgroundColor:'#282c34', justifyContent:'center', alignItems:'center'}}>
        <img src={"https://bestofprogramming.com/wp-content/uploads/2020/02/favicon-300x300-1-e1580916887785.png"}/>
        <Text style={{color:'white', fontSize:20, marginBottom: 20}}>Şu anda bir React Native Web sayfasını görüntülüyorsunz.</Text>
        <Button title={"Ben de bir butonum"} onPress={() => alert("Butona tıkladınız")}/>
      </View>
    )
  }
}

Bu kodda React Native Componentleri ile beraber html’deki img etiketini kullandım ve böyle bir mix nasıl yapılır onu gösterdim. Şimdi bu kodu yazıp tarayıcıya döndüğümüzde bir hata farkedeceksiniz, evet sayfanın yarısı yok 😀 Bu sorun React Native’de kullanılan flex’i html’in ilk etapta algılayamamasından kaynaklı. Çözümü ise çok basit, sadece bir dosya üzerinde ufak birkaç oynama yapmak gerekiyor. Proje dizininin altındaki public/index.html’i açarak şu değişiklikleri yapıyoruz

<html lang="en"> –> <html lang="tr" style="height: 100%">

<body> –> <body style="height: 100%">

<div id="root"></div> –> <div id="root" style='display:flex; height:100%'></div>

Bu değişikliklerden sonra sayfamızın oturmuş ve çalışır halde olduğunu göreceksiniz. Sayfanın içeriği aşağıdaki gibi olacaktır:

 

Eğer fotoğraftaki gibi bir ekranla karşılaşıyorsak bu anlatımı başarı ile tamamlamışım demektir. 

Written By

Uğur Demirel

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir