Etiket: React Native Dersleri Türkçe

React Native Dersleri

React Native Dersleri

Günümüz teknoloji kullanım alışkanlıkları daha kolay ve minimal hale gelirken tabi ki mobil cihazların kullanımı da paralel olarak inanılmaz bir artış gösteriyor. Biz yazılımcıların da gelecekte büyük varlık gösterebileceği yerlerden biri de mobil cihazlar. Ancak mobil uygulama yaparken önceleri çok fazla iş yükü, bilgi, beceri ve tecrübe gerektirirken  -android uygulamalar için Java öğrenmek, iOs uygulamalar için C-objective öğrenmek gibi- artık bir nimet diyebileceğimiz bir javascript kütüphanesi sayesinde aynı kodlama ve yapıya sahip yazılım yapıp iki işletim sistemi için de çıktı alabiliyoruz.

Tabi ki React Native sayesinde.

React Native nedir?

React Native, Facebook tarafından geliştirilen (halen geliştirilmeye devam eden), mobil cihazlar için native uygulamalar yapmamızı sağlayan bir Javascript framework’üdür.

İlk çıkış noktası iOS işletim sistemli mobil cihazlar için uygulama geliştirmek olsa da kısa sürede android işletim sistemleri için de React Native desteklenebilir hale getirildi. Yine Facebook’un geliştirdiği React sistemi üzerine inşaa edilen bu framework, React’ın çalışma prensiplerini de birebir barındırıyor. Eğer daha önceden React kullandıysanız, ilgilendiyseniz alışmanız çok kısa sürecektir.

React Native ‘i çekici kılan yanlarından en büyük özelliği hybrid gibi yazılıp native çıktı almamızı sağlaması. Bu sayede Java, C++, C-Objective, Swift gibi dilleri öğrenmek zorunda kalmadan sadece Javascript kütüphanesi sayesinde aynı performansta native uygulamalar geliştirebilirsiniz.

Kurulum (Android)

Ben sitemde yapacağım bütün çalışmaları mecburen Android üzerinden göstereceğim. Çünkü Windows tabanlı bir bilgisayar kullanıyorum ve iOS için yapacağım çalışmaları simüle edebileceğim bir alt yapıya sahip değil.

Öncelikle Facebook’un kendi kütüphanesini referans alarak devam edeceğiz. Bilgisayarımızda NodeJs kurulu değilse Chocolatey paket yöneticisi ile Nodejs kurulumu yapabiliriz.

Başlat düğmesine tıkladıktan sonra “cmd” yazıp, sağ tıklayıp “Yönetici Olarak Çalıştır” diyoruz.

Daha sonra aşağıdaki komutları Komut İstemimize yazıyoruz.

Kurulum işlemi tamamlandıktan sonra React Native komut satırı arayüzünü yüklememiz gerekiyor. Yine Komut İstemcimize aşağıdaki komutu yazıyoruz.

Bu işlemler bilgisayarımıza nodejs ve python kurulumunu, aynı zamanda yapacağımız React Native uygulamalarını çalıştırmamızı sağlayacak gerekli modülleri ve alt yapıyı oluşturmamızı sağlıyor.

Hiç bir hata almamak için CMD’yi yönetici olarak çalıştırdığınızdan emin olun!

Android Studio Kurulumu

Yapacağımız uygulamaların temelini hazırlamak ve simültane edebilmek için android studio ve android virtual device ihtiyacımız var. Bu adresten Android Studio programını indirebilirsiniz.

Android Studio kurulumu esnasında aşağıdaki bileşenlerin tamamını eksiksiz kuracağınızdan emin olun.

  1. Android SDK
  2. Android SDK Platform
  3. Performance (Intel ® HAXM)
  4. Android Virtual Device

Kurulum esnasında Android Studio her zaman en son Android SDK’sını varsayılan olarak seçer ve yükleme işlemine bu şekilde devam eder. Ancak tavsiye edilen “Android 6.0 (Marshmallow) SDK” seçerek kurulumumuzu gerçekleştireceğiz. Bunun sebebi ise eski ve en sorunsuz SDK olması ve yeni SDK’lar ile de uyumlu olması.

Android Studio ayarlarından Appearance & Behavior → System Settings → Android SDK ekranına geldikten sonra “Show Package Details” kutucuğunu işaretleyip “Android 6.0 (Marshmallow)” SDK altında yer alan görseldeki bütün kutucukların işaretli olduğundan emin olun. Değilse işaretleyip onaylamanız ve eksiklerin kurulması için beklemeniz gerekmektedir.

ANDROID_HOME Ortam Değişkeni Kurulumu

React Native komut satırı arayüzü, windows’umuz üzerinde çalışmak için bir ortam değişkenine ihtiyaç duyar. Bunu eklemek oldukça basittir. Aşağıdaki adımları takip edin:

Denetim Masası → Sistem ve Güvenlik → Sistem → Ayarları Değiştir → Gelişmiş → Ortam Değişkenleri → Yeni

Yukarıdaki işlemleri yaptıktan sonra aşağıdaki gibi bir pencere gelecek karşınıza

Kendi kullanıcımız için olan kısımdaki “Yeni” butonuna bastıktan sonra aşağıdaki pencere karşımıza gelecek;

Eklememiz gereken iki adet Ortam Değişkeni mevcut. Birincisi ANDROID_HOME, diğeri ise JAVA_HOME olacak.

ANDROID_HOME için Visual Studio’nuzun SDK klasörünüzü hedef göstermeniz gerekmektedir. Aşağıdaki gibi kullanabilirsiniz:

“KULLANICI_ADI” kısmına işletim sisteminizde kullandığınız kullanıcı adınızı giriniz.

JAVA_HOME için Android Studio’muzda yer alan Java klasörünü hedef göstermemiz gerekmektedir. Aşağıdaki gibi kullanabilirsiniz:

Bu işlemleri yaptıktan sonra Android Virtual Device kısmında “Android 6.0 (Marshmallow) SDK” kullanan bir cihaz yaratıp çalıştırıp açıldıktan sonra bir sonraki aşamaya yani artık React Native kurup canlıyı görebileceğimiz kısıma geçmek.

React Native Kurulumu

Yukarıdaki işlemler karışık ve fazla gözükebilir ancak hepsi bir defaya mahsus yapılacak olan alt yapı çalışmalarıydı. Bundan sonrası ise React Native kurulumu işlemleridir. Bütün işlemleri yaptınız ve Android sanal cihazınız açık bir şekilde bekliyorsanız; şimdi çalışmalarımızı yapacağımız, dosyalarımızı ve modüllerimizi yükleyeceğimiz masaüstünde bir klasör oluşturalım.

Ben “NativeUygulama” adında bir klasör oluşturdum. Ardından yönetici olarak bir CMD daha açıyoruz. Komut İstemcimizden “cd” komutlarını kullanarak masaüstüne geçiş yapalım ve aşağıdaki komutları girelim.

 

Bu işlemler biraz uzun sürebilir. Sonuna kadar bekleyin. Kurulum işlemi bittikten sonra yeni bir CMD açıp aşağıdaki komutu yazıyoruz.

Eğer herşey sorunsuz ilerlediyse açtığımız Android sanal cihazımızda artık React Native dosyaları ile birlikte gelen demo görüntüsünü görüyor olmamız gerekir :)

Oluşturduğumuz “NativeUygulama” klasörünün içine girdiğimizde bütün React Native dosyalarının yüklendiğini göreceksiniz. Burada “index.android.js” dosyasını açarak yazıları düzenleyerek ilk uygulamanızın tadını çıkarabilirsiniz :)

React Native ile ilgili çok fazla Türkçe kaynak olmamasından dolayı yabancı kaynaklı bütün içerikleri hem Türkçeleştirerek hem de öğrenmemize faydalı olabilecek uygulamalar geliştirerek bu içeriği bir yazı dizisi haline getirmeyi planlıyorum. React Native Dersleri başlığı altında bütün eğitimleri liste haline getirip bu yazının altında bulabileceksiniz.

 

Problem Çözümleri
Komut Satırından Android Emulator’ü Çalıştırma Sorununun Çözümü