Bu yazımda sizlere React Native ile proje geliştirebilmek için gerekli olan kurulumların nasıl yapılacağın anlatacağım. bildiğiniz üzere React Native Android ve IOS üzerinde aynı anda uygulama geliştirmenizi sağlar. Bu yüzden IOS geliştirebilmeniz için bir macOS sistemini ihtiyacınız vardır. Bu nedenle bende React Native kurulumunu Macbook üzerinden anlatmayı daha uygun gördüm. İleride window üzerinde kurulum ile iligili bir makale hazırlamaya çalışacağım. Şimdiden başarılar…
Öncellikle olarak React Native sitesine gidiyoruz. http://facebook.github.io/react-native/ siteye girdiğimiz zaman React Native ile ilgili çeştili bilgilere ulaşabilirsiniz. Özellikle ingilizcesi iyi olan arkadaşlar için oldukça başarılı bir site. React Native ile aradığınız herşeye bu siteden ulaşabilirsiniz. Kurulum için sitenin en altına iniyoruz. “Get Started” butonuna tıklıyoruz. Açılan sayfadan “Building Projects with Native Code” butonuna tıklıyoruz. Bu sayfada karşınıza “Installing Dependencies” adında bir alan çıkacaktır. Türkçesi bağımlı kurulumlar diyebiliriz. Bu alanda bize kurulumla ilgili bağımlı olduğumuz tüm bileşenlerin bilgileri sunulacaktır.
Kurulum İçin Gerekli Adımlar
1) Öncelikli olarak IOS uygulaması geliştirebilmemiz için XCODE alt yapısını kullanmamız gerekmektedir. Bu sebepten dolayı App Storedan XCODE kurulumunu tamamlamanız gerekmektedir. Bu kurulum oldukça basittir. App Store girip XCODE aratıp uygulamayı kur dediğimizde uygulamayı kurmaya başlayacaktır. App Store dan herhangi bir uygulama kurmaktan farkı yoktur.
2) Android uygulaması geliştirebilmeniz için ise “Android Studio” kurulumunu yapmanız gerekmektedir. Android Studio kurulumu için ise “https://developer.android.com/studio/“ linkini kullanarak gerekli kurulumları yapmanız gerekmektedir. XCODE ve Android Studio kurulumlarının detaylarını sizlere anlatmayacağım. Eğer React Native ile ilgili proje geliştirmeye karar kaldıysanız bu iki platforma da az çok hakim olduğunuzu veya en azından bilgisayarınızda kurulu olduğunu düşünüyorum.
3) Homebrew kurulumu, “https://brew.sh“ sayfasına gidiyoruz. Sitenin türkçe dil seçeneği mevcut. Homebrew macOS’da yazılım geliştirebilmek için gerekli dökümantasyonları sağlayan bir paket yöneticisidir.
Homebrew kurulumu oldukça basittir. Mac bilgisayarımızdan terminale giriş yapıyoruz. ( cmd + space tuşuna bastıktan sonra arama bölümüne terminal yazarak ulaşabilirsiniz. ) Karşıma gelen teriminalin açılış sayfasına Homebrew sitesinin ana sayfasında yazılı olan kurulum kodunu (aşağıda yer almaktadır.) yapıştırıp enter tuşuna basın kendisi gerekli kurulumu yapacaktır. Kurulum işlemi birkaç dakika sürebilir.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
4) Watchman kurulumu, yine terminal üzerinde aşağıdaki kodu yazarak ender tuşuna basıyoruz kurulum bir kaç dakika içerisinde gerçekleşecektir. “brew Install watchman” Watcman facebook kendi geliştirdiği bir alt yapı kısaca özetleyecek olacaksak yazmış olduğumuz kodu hızlı bir şekilde derleyip bize sunacak olan bir altyapı kurulumu.
5) Command Line Inter Face kurulumu, bunun içinde terminale “npm Install -g react-native-cli” komutunu gönderiyoruz. Command Line Inter Face, normalde manuel yapmanız gereken bazı adımları komut satırından yapmanızı sağlamak amacıyla Google tarafından geliştirimiş bir alt yapıdır.
Yukarıda ki 5 adımda gerekli kurulumları gerçekleştirmiş bulunuyoruz. Şimdi ilk projemizi oluşturma vakti.
Proje Oluşturma
Terminali yardımıyla React Native uygulamamızı oluşturacağız. Bunun için ben masa üstüne “ReactNative” adında bir klasör oluşturuyorum onun içerisine de “Project” adında bir klasör oluşturuyorum. Şimdi React ile geliştirdiğim uygulamaların bu konuma kaydedilmesini sağlayacağım. Bunun için terminal üzerinden yanda ki kodları yazarak “cd Desktop/ReactNative/Project” dosya konumuna ulaşıyoruz. (cd komutu terminal üzerinden dosyaya erişim sağlar.) Projemizi oluşturmak istediğimiz dosyaya eriştik. Şimdi ilk projemizi oluşturalım. “react-native init projeadı” kodunu yazıp entera basıyoruz. Entera bastıktan sonra terminal üzerinde bir install kurulum çubuğu gözükür. kurulum çubuğunu takip ederek kurulum tamamlana kadar terminali kapatmayınız. Bu süreç biraz uzun sürebilir. Kurulum işlemi tamamlandıktan sonra Masaüstünde proje dosyanıza giderek oluşturduğunuz proje dosyasını kontrol edebilirsiniz.
Editör Kurulumu
Tebrikler ilk projenizi oluşturmuş bulunmaktasınız. Şimdi ise proje geliştirebilmek bir editöre ihtiyacımız var ben mac üzerinde atom’u kullanıcam size farklı editörler de kullanabilirsiniz. Atom kurulumu için yandaki linke tıklayarak siteye erişim sağlayın “https://atom.io” açılan sayda download butonuna tıklayarak kurulum dosyasını indirin ve gerekli kurulumu bilgisayarınıza yapın.
Atom programını iyileştirmek için ben sizlere iki tane paket kurulumunu (ESLint ) tavsiye ediyorum. Bu kurulumlar sizlere kod yazarken kolaylık sağlamak amacıyla oluşturulmuş paketlerdir. Kod tamamlama hatalı kod yazma gibi. Atom uygulamamızı açtıktan sonra Atom butonundan “preferences” butonuna tıklıyoruz. Açılan sayfadan “Install” sekmesine geliyoruz. “Install Packages” sekmesinin altında bulunan text kısmına “linter-eslint” yazıp “packages” butonuna basıyoruz search işlemi tamamlandıktan sonra aşağıda çıkacak olan “linter-eslint” ve “Linter” kurulumlarını yapınız.
Projeyi Çalıştırma
Tüm kurulumları yaptıktan sonra şimdi sıra promizi ayağa kaldırmak ta bunun içinde terminal üzerinde yine cd komutunu kullanara projemiz içerisine geliyoruz ve yanda ki kodu “npm start” yazıp entera basıyoruz.
Gerekli kurulumları yaptık, projemizi oluşturduk ve projemizi çalıştırdık. Artık sıra proje geliştirmeye geldi size başarılar…