React Native ile Uygulama Oluşturma

React native ile ilk uygulamamızı geliştireceğiz. Bu yazıdaki amacımız uygulama nasıl oluşturulur ve uygulamada hangi dosya ne işe yarar gibi soruların cevabını bulmak.
Proje oluşturmak icin istediğimiz bir klasörde react-native init komutu ile projemizi oluşturacağız.

react-native init ilk_projemiz

Projemiz oluştuktan sonra proje klasörünün içerisine giriyoruz.

cd ilk_projemiz

Android emulatorde çalışmak için react-native run-android, iOS emulatorde çalışmak için ise react-native run-ios komutlarını kullanıyoruz. Dileyenler Xcode ya da Android Studio araçlarını kullanarak da uygulamalarını test edebilirler. Bu yazıda iOS emulatorde örnek gerçekleştireceğimizden ötürü react-native run-ios komutunu kullanıyoruz.

react-native run-ios

Komutu çalıştırdıktan sonra emullatorumuz açılıyor ve uygulamayı çalıştırıyor. Default olarak aşağıdaki ekran karşımıza çıkacaktır.

Şimdi ise projemizi istediğiniz bir IDE ile açalım. Burada Visual Studio Code aracını kullanacağız. Visual Studio Code ile projemizi aşağıdaki görsellerde olduğu gibi açabiliriz.

 

 

Şimdi ise projedeki dosyalar ve içerikleri ne işe yarar bunlara bakalım. Öncelikle projenin klasöründe yer alan index.js dosyasından bahsedelim.

index.js
Bu dosya uygulamanın ana başlangıç noktasıdır. Uygulama bu dosyayı okur ve buradaki başlangıç sınıfını ve onun dosyasını alarak uygulamayı başlatır.
Örnek uygulamamızda App.js dosyası App olarak eklendiğini görüyoruz. Bu App modülü giriş sınıfı olarak belirtilmiştir. Yani uygulama açıldığında App.js dosyasındaki işlemler işlem görecektir.

App.js
Uygulamamız bu dosyanın içeriklerine göre çalışacaktır. Üst tarafta gerekli modüller eklenmiştir. Bu modüllerin her birinin ayri bir amacı vardır. Modüllerin ayrıntılarını bir başka yazıda belirtebiliriz.
Aşağı doğru indikçe değişkenler görebiliriz. Asıl nokta ise class ile belirtilen sınıfımızdır. Dosya içerisinde birden fazla sınıf oluşturabilir. Fakat bizim dosyamızda şu an bir tane sınıf görülmektedir. Bu sınıf ise export default olarak ifade edilmiştir. Yani App.js dosyası çalıştırılmak istendiğinde işleme buradan başlanacak denmektedir.
Sınıfın içerisinde fonksiyonlar değişkenler belirtebiliriz. Halihazirdaki dosyamıza gelecek olursak herhangi bir değişken ya da fonksiyon belirtilmemiş.
render() fonksiyonun içerisinde yer alan return modülü uygulamanın ekrana yansıtacağı bölümü oluşturmaktadır. Yani kullanıcının göreceği ekranda yer alan bütün tasarım bu return modülünün içerisinde bulunan elemanlardan oluşmaktadır.
Dosyamızın en alt kısmında yer alan styles değişkeni ise tasarımda kullanılan değişkenleri barındırmaktadır. Bir nevi css diyebiliriz.

Proje klasörümüzün içerisinde android ve iOS adlarında iki tane klasör mevcuttur. Bu klasörler sadece react-native init ile oluşturulan projelerde otomatik olarak oluşur. Bu platformalara özel değişiklik yapmak istersek bu klasörlerin içerisine girerek dilediğimiz değişiklikleri yapabiliriz. Ayrıca bazı modüllerin eklenmesinde manuel işlemler gerekebilmektedir. Böyle durumlarda da bu klasörlere ihtiyaç duyabilirsiniz.

node_modules klasöründe ise adından da anlaşılacağı üzere yüklü modüller bulunmaktadır. Özellikle iOS geliştirmelerde bazı modüllerin eklenmesi esnasında bu klasöre çokça ihtiyaç duyarız. Fakat hiçbir şekilde yazılım geliştirirken yani kod aşamasında bu klasörler ile ilgilenmeyiz.

Teşekkürler.