Detaylı React Native Kurulumu (Windows)

Merhabalar, bu yazıda sıfırdan react native nasıl kurulur ve geliştirilmeye başlanır bunlara değineceğiz.

Not: Bu yazı Windows işletim sistemini baz alarak hazırlanmıştır, eğer farklı işletim sistemleri için yorumlar üzerinden istekte bulunulur ise eklemeler yapılacaktır. Linux ve MacOS sistemleri için React Native dökümanına göz atabilirsiniz.

React Native Dökümanı: https://facebook.github.io/react-native/docs/getting-started

Nelere İhtiyacımız Olacak?

  • NPM + Node.js
  • Genymotion emülatör ya da Fiziksel bir test cihazı (telefonunuzu kullanabilirsiniz)
  • Expo-cli (npm üzerinden yükleyeceğiz)

Gerekli Yazılımların Yüklenmesi ve Kurulumlar

React Native kütüphanesini kullanabilmemiz için öncelikle npm ve node.js yüklemesini yapmamız gerekiyor. Node.js yüklemesi yaptığımızdan npm’de içinde geldiğinden dolayı ilk adımımızı tek bir kurulum yaparak gerçekleştirmiş olacağız.

Node.js indirme adresi: https://nodejs.org/en/download/

Öncelikle yukarıda bağlantıyı açarak LTS sekmesinde bulunan Windows installer satırından 32 ya da 64 bit sürümlerinden hangisini işletim sisteminizde kullanıyorsanız ona tıklayarak indirme işlemini başlatın.

İndirme işlemi tamamlandıktan sonra kurulum dosyasını çalıştırın ve ileri ileri şeklinde kurulumu tamamlayın. Eğer bir sorun çıkmadan bu adımları tamamladıysanız node.js ve npm’i bilgisayarınıza başarıyla kurmuşsunuz demektir.

Şimdi bilgisayarımıza expo-cli kurulumuna geçiyoruz. Windows arama çubuğuna gelerek “cmd” yazıyoruz ve arama sonuçlarında çıkan Windows Komut Satırına sağ tıklayarak yönetici olarak çalıştır diyoruz. Eğer işletim sisteminiz İngilizce ise arama sonuçlarında Command Prompt çıkacaktır, aynı çalıştırma işlemini uygulayın. Eğer güvenlik için sizden onay isterse evet diyerek devam edin.

Karşınıza siyah bir terminal ekranı (siyah ekran) çıkmış olması gerekiyor. Eğer çıktıysa ekrandaki ilk komut satırında “C:\Windows\System32” tarzında bir ibare olması gerekiyor eğer bu ibare yerine sizde “C:\Users\kullanici-adiniz” şeklinde bir ibare var bu ise yönetici olarak çalıştırmadığınız anlamına geliyor. Terminal ekranını kapatın ve bir önceki adımı tekrar ederek yönetici olarak çalıştırın.

Bir önceki adımda kurduğumuz npm’in kontrolünü yapmak için ise komut satırına aşağıdaki kodu yazın ve eğer karşınıza bir versiyon numarası çıkmaz, hata mesajı çıkarsa ilk adımda sorun olmuş demektir. Bu kod kurduğunuz npm yazılımının sürümünü gösterecektir.

Sonrasında aşağıdaki komutu terminal ekranına yazarak global olarak expo-cli kurulumunu yapmış olacağız.

Komut satırını yazıp, çalıştırdıktan sonra bir süre kurulum işlemi yapılacak. Bu kısımda internet bağlantınızın olması gerekiyor. Kurulum işlemi bitip terminal bizden yeni bir komut isteyene kadar beklemede kalıyoruz.

Geldik son adıma, eğer android bir telefona sahipseniz telefonunuzu bilgisayarınıza kablo ile bağlayarak derleme ve test işlemlerini yapabilirsiniz. Bunun için geliştirici seçeneklerinden usb hata ayıklama modunu aktifleştirmeniz gerekiyor. Ayrıca bu şekilde telefonunuza bağlarak projenizi geliştirmek için bilgisayarınızda adb desteği olması ve adb sürücüsünün yüklü olması gerekiyor.

Onun yerine direkt olarak bilgisayarınızda derlemek ve test işlemlerini yapmak için genymotion isimli emülatörü kullanabilirsiniz. Kullanımı ücretsiz bir uygulama fakat kişisel kullanım için internet sitesinden üyelik oluşturduktan sonra indirebilirsiniz.

Genymotion indirme adresi: https://www.genymotion.com/fun-zone/

Bu adrese gidikten sonra Download butonuna tıkladığınızda sizden bir üyelik oluşturmanızı isteyecek üyelik girişi yaptıktan sonra indirme ve kurulum işlemini gerçekleştirebilirsiniz.

Bundan sonrası proje oluşturma ve geliştirme kısmı. Eğer tüm adımları eksiksiz olarak yaptıysanız artık react native projenizi oluşturabilirsiniz.

Bir react native projesi oluşturmak ve çalıştırmak için aşağıdaki kod satırlarını sırası ile terminal ekranından çalıştırabilirsiniz.

Bu şekilde projenizi oluşturduğunuzda terminalde hangi dizindeyseniz oraya projeniz oluşturulacaktır. Masaüstünüze bir proje oluşturmak isterseniz terminalinizi normal (yönetici değil) bir şekilde açtıktan sonra aşağıdaki komutu çalıştırdıktan sonra üst kısımdaki proje oluşturma işlemini yaparsanız proje klasörünüz masaüstüne oluşturulmuş olacaktır.

Bundan sonrası için javascript, ecmascript ve react bilgisine ihtiyacınız var. Eğer kendinizi react native üzerinde geliştirmek isterseniz Yasin Uğurlu’nun Udemy üzerindeki eğitimini buraya tıklayarak inceleyebilirsiniz.

 

1 Comment

Bir cevap yazın

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