Etiket: Javascript

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.

React.Js Dersleri – Başlangıç ve Kavramlar

React.Js Dersleri – Başlangıç ve Kavramlar

Giriş

Bugün yeni bir eğitim serisinin ilk yazısına başlıyoruz. Devamını getirmeyi düşündüğüm bu seride temel anlamda React.Js öğrenip bunun üzerine uygulamalar ve denemeler yapacağız. React.Js özetlemek gerekirse Facebook’un geliştirdiği bir javascript “user interface” kütüphanesidir. Detaylara inmeden önce bazı belii temel kavramların üzerinden geçmekte fayda var.

React.js Nedir?

React, Facebook tarafından geliştirilen etkileşimli öğeler oluşturulmasını kolaylaştıran, geniş kapsamlı ve sürekli güncellenen bir arayüz bileşenidir. React’ı diğer kütüphanelerden ayıran bir özelliği ise sadece istemci (client-side) taraflı değil aynı zamanda sunucu (server-side) taraflı da çalışabilme özelliğidir. Ayrıca durum değişikliklerini Sanal DOM (Virtual DOM) adı verilen bir yerde tutarak daha verimli çalışmalar gerçekleştirmenize olanak sağlar.

React.Js bir javascript arayüz oluşturma kütüphanesidir.
React.Js bir javascript arayüz oluşturma kütüphanesidir.

Sanal DOM (Virtual DOM) Nasıl Çalışır?

Bir insanın etrafında biçimlendirdiğiniz bir nesneniz olduğunu hayal edin. Bir insana ait bütün özelliklere sahip ve insanın o anki halini yansıtmış olsun. Şimdi bu objeyi alıp değişiklik yaptığınızı düşünün. Bıyık ve biraz da kaslı kollar ekleyin. Ne zaman bu değişiklikleri yapsak iki şey meydana gelir; Birincisi, React bir “Diffing” algortması çalıştırarak hangi değişiklikler yapıldığını tespit eder. İkinci adım ise “Uzlaştırma”, yani burada diff sonuçlarıyla DOM’u günceller. Basitçe React’ın DOM ile çalışma mantığı bu şekildedir. React çalışma şekli; gerçek insanı alıp baştan aşağı onu yeniden yapmak yerine sadece hayal edilen yeni görüntüde yüzü ve kollarını değiştirir.

Bu demek oluyor ki, eğer girdide bir metin bulunuyorsa ve işleyici meydana geldiğinde, girişin temel düğümü uzlaştırması için ayarlanmadığı sürece metin bozulmaz. Çünkü React sanal DOM’u kullanır.

Sanal DOM’da gerçekleşen hiçbir işleyiş kullanıcıya yansıtılmayacağı için de server-side programlama yapabilmek mümkün hale gelmektedir.

Başlangıç

React “Starter kit”ini indirerek artık eğitimlerimize başlayabiliriz.

React Starter Kit

Sayfamızı Oluşturalım

React’ı sayfamıza kurabilmek için öncelikle react.js, react-dom.js ve JSXTransformer.js yi sayfamıza eklememiz gerekmektedir. Daha sonra component’lerimizi yazabilmemiz için ise script taglarımızı açmamız gerekir. Ancak react yazabilmek için script tagımızını type değerini “text/jsx” olarak belirlemeliyiz. Bunu daha sonra açıklayacağım.