31 Aralık 2016

Bir Serüven Biter, Başka Bir Serüven Başlar(React-Native’e Giriş)

ile Turan Yunus

Arkadaşlar Merhaba,
Öncelikle söylemek istiyorum ki, ionic 1.4 teknolojisini kullanırken react-native teknolojisine geçmiş bulunmaktayım.

 

Neden Ionic teknolojisinı bırakıp React-Native diyorum.

ionic 1.4 ögrendikten sonra ionic 2 ögrenmeye niyetlendim ki, ionic2’deki mükemmel değişim ve typescript’in gelmesiyle biraz zorlanıcaktım.
Bende madem sıfırdan öğrenicem o zaman daha iyi teknolojiler olabilir kaygısıyla araştırmalara başladım. Eğer daha iyisini bulamadığımda kürkçü dükkanı sözü gibi tekrardan ionic’e dönücektim ki araştırmalarım beni hep react-native teknolojisine itti. Biraz araştırdım tam oturmadı derken yazılım sektöründeki önemli isimlerine  ionic’mi ? react-native mi ? diye sordum. Nefes almadan direk react-native dediler. Nefes almalarını bekledim belki değişir diye ama yok bu seferde özelliklerini saymaya falan başladılar. 🙂  Bende araştırmalarım sonucundan zaten etkilenmiştim ki, ustalarımın iddaalı konuşmaları beni bir heyecanlandırdı direk giriştim.

 

-> Ufak bir ipucu veriyorum. Beni etkileyen en önemli olayı,
normalde ionic’de napardık uygulamamızı browser’da görür değişiklikleri yaptıktan sonra browser’ın yenilenmesini beklerdik. Telefon özelliklerini kullanmak için build edip android studio’dan açıp ordan emulatör’den görürdük yani didisinin didisi diyorum artık react-native’den sonra 😀

 

React-Native’de tamamen değişiklilerimizin sonuçlarını AndroidStudio’nun emulatör’ünden görüyoruz. IOS kullananlar da xCode’un emülatöründen görüyor. Hala mantık oturmadı farkındayım 😀

Hadi React-Native’e başlayalım.

  1.  İlk olarak Node.js’yi indiriyoruz. ( indirme link Node.js )
  2. Android Studio’yu kurup daha sonradan yükleme işlemlerini yapıyoruz. ( Android 2 ile gelen emülatör bi harika ddostum 😀 )
  3. Android Studio yükleme işlemlerinde ( SDK MANAGER → Appearance & Behavior → System Settings → Android SDK ) girdikten sonra Android sürümlerinden 6.0 (Marshmallow) ve üstünü kurdum. Bende sorun çıkarmadı sizde de bir sorun olmuyacaktır.
  4. Android Studioyu ilk kurdugum da

    ” Android SDK Build-Tools 23.0.1 “

    uyarısı verdi ve yüklememi istedi bende direk yükledim sorunu çözmüş bulundum.

  5. ” Android Avd ” iconuna tıklayıp emulatörümüzü kuruyoruz. 5.0 üzeri herhangi bir teknoloji kuruldugunda problem olmayacaktır.( Ben Nexus 5 kurdum )
  6. Android Studio tarafını tamamen kurmuş bulunduk ve sonraki işlemlere geçiyorum.
  7. Güzel bi editör lazım. Bunun için ” SublimeText 3 “ kullanıyorum ve  “Babel” syntax yapısını kurdum.  Sublime Text 3 ekranında  React-Native syntax  kodlarını kullanılır hale getirdik.
  8. Şimdi React-native dosyalarını düzenlemeye başlıyoruz.
  9. Komut(Commond) ekranını açıyoruz .
  10. React-Native kurulumlarına başlıyoruz. İlk olarak bu ‘npm install g reactnativecli‘ komutu çalıştırıyoruz.
  11. ” cd desktop “  yazarak komut ekranında masaüstüne geliyoruz. “cd” komutu dosya içine girme işlemi yapar. ( Şuan masaüstündeyiz)
  12. Komut ekranına  ” react-native init ‘Projeninİsmi’ ”  kodunu yazıp enterlıyoruz. Sonra yükleme işlemleri için beklemeye alıyoruz kendimizi
  13. Masaüstüne baktığınızda projenizin oluştugunu göreceksiniz.
  14. Herşey tamam, Android Studio’yu kurduk ve emulatörümüzü çalıştırdık ve hazır hale getirdik.
  15. Komut ekranına ” react-native start “ yazıyoruz. Daha sonra emulatör de uygulamımızın başlangıç halini görüyoruz.
  16. Her değişiklik yaptığımız da emülatör’ün üstüne gelip 2 kere “R” tuşuna bastığımızda değişikliklerimizi direk görebiliyoruz ve ionic ile ilginen biri bu yenilikle büyülenebiliyor 😀

 

        Dilimin döndüğü kadar anlatmaya çalıştım, sizlere ufakta olsa yardımcı olabildiysem ne mutlu bana

 

Teşekkürler

Kolay Gelsin