React Native Dersleri 03 - React Native Kurulum

Bu hafta React Native'i bilgisayarımıza kurup, proje açmayı öğreneceğiz.

Adım 1 Node.js Kurulumu

Kendi sitesi üzerinden kurabilir ya da cmd / git bash üzerinden kurabilirsiniz. Ben git bash'i tercih ettim. (Git bash hakkında daha fazla bilgi için tıklayabilirsiniz.) 

Öncelikle Node'un kendi bilgisayarınızda olup olmadığını kontrol etmek için npm -v komutunu kullanabilirsiniz.

Eğer bilgisayarınızda yüklü değilse npm install komutunu yazarak default şekilde indirebilirsiniz. Ama benim bilgisayarımdaki gibi node.js çoktan yüklü ise npm install -g npm  komutunu kullanarak global'deki node.js'imizi güncelleyebiliriz. (Npm ile ilgili daha fazla bilgi için tıklayabilirsiniz.)

• Nedir bu Node.js?

NodeJS, javascript ile kodlama yapabilmemize olanak sağlayan bir ortamdır. NPM (Node Package Modules), Node.js için bir takım script’lerin otomatik olarak indirilmesini, güncellenmesini, silinmesini sağlayan bir paket yöneticisidir. Windows bilgisayarlarda Node.js ile birlikte gelse de Linux üzerinde kurmak için ayrı bir komut gerektirir. Node.js ile birlikte çalışır. Temel olarak üçüncü parti yazılımları yüklemeyi sağlayan bir araçtır. Isaac Z. Schlueter tarafından tamamen javascript dili kullanılarak geliştirilmiştir

Adım 2 React Native Cli Kurulumu

React Native Cli, React Native projelerini oluşturmak ve çalıştırmak için gereken bir araçtır. Node.js'i kurduğumuz gibi React Native Cli'yi de npm üzerinden indirebiliriz. npm install -g react-native-cli yazarak indirebiliriz.

Adım 3 Proje Kurulumu

Artık React Native projemizi oluşturabiliriz. react-native init ReactNative komutu ile React Native projesi için gereken tüm npm kütüphanelerini kurup bir başlangıç projesi oluşturabiliriz.

Böylece projemiz oluşmuş oldu.

İçindeki dizinleri tanıyalım:

• android / ios: Android ve iOS platformları için ayrı ayrı proje dosyalarımız burada saklanıyor.
• node_modules: Projenin bağlı olduğu npm paketlerini barındırıyor.
• .babelrc: Babel javascript derleyicisi ile ilgili yapılandırma dosyası olan .babelrc, "presets": ["react-native"] satırı ile node_modules dizininde yer alan babel-preset-react-native plugin’inin kullanılacağını belirtiyor.
• .buckconfig: Facebook’un Buck isimli build sistemi ile ilgili yapılandırma dosyası olan .buckconfig, Android uygulaması için build sürümü ve maven repo url’ini barındırıyor.
• .flowconfig: Yine Facebook’un Flow isimli statik tip konrolcüsü ile ilgili yapılandırma dosyası olan .flowconfig, React Native projesi ile ilgili çeşitli yapılandırma ayarlarını içeriyor.
• .gitattributes/.gitignore: Git versiyon kontrol sistemi ile ilgili yapılandırma dosyaları.
• .watchmanconfig: Facebook’un Watchman isimli dosya izleme aracı ile ilgili yapılandırma ayarlarını tutar.
• App.js: Örnek bir React Native uygulama dosyasıdır.
• app.json: Uygulama ile ilgili manifest dosyasıdır.
• index.js: Uygulamanın başlangıç noktasıdır diyebiliriz. İlgili bileşenler ve başlangıç bileşeni burada belirtilir.
• package.json: proje ile ilgili bağımlılıkların npm’e belirtildiği yapılandırma dosyasıdır. Proje adı, versiyonu, lisans bilgisi ve diğer ilgili ayarlar burada tutulur.

Kaynakça :

https://www.tutorialspoint.com/react_native/react_native_environment_setup.htm

http://devnot.com/2017/react-native-ile-android-ve-ios-programlama

https://ysfzrn.gitbooks.io/react-native-turkce/window-installation.html

https://facebook.github.io/react-native/docs/understanding-cli