React Native

1. React Native Nedir ?

2. Neden Kullanılır ?

3. Sıfırdan bir React Native projesi nasıl oluşturulur ?

Herkese Merhabalar,

Bu yazımda “React Native nedir, neden kullanırız, React Native ile sıfırdan bir proje nasıl oluşturabiliriz” konularına değineceğim.

React Native Nedir ? Neden Kullanılır ?

Öncelikle React Native için Javascript ve React hakkında bilgi sahibi olmamız gerek. Çünkü React Native bu diller üzerine inşa edilmiştir. Ancak odak noktası web değil mobildir. Yani mobil tabanlı uygulamalar geliştirmek için kullandığımız bir JS framework’ü kendisi.

React Native tek kod tabanlı bir yapıya sahip. Bunla ne demek istiyoruz şöyle açıklayayım. Mobil aplikasyonların 2 tarafı vardır : IOS ve Android. Bunlar birbirinden tamamen bağımsız oldukları gibi kodlama dilleri de birbirinden çok farklıdır ( Swift vs Java/Kotlin ). Ancak React Native’in bu tek kod yapısıyla biz bu dilleri bilmeden de iki platform için mobil aplikasyonlar oluşturabiliriz. Birçok büyük şirket ( Facebook, Instagram, Skype, Pinterest ) bu nedenden dolayı React Native kullanmakta. Çünkü hem zamandan tasarruf ediyorlar hem de iki ayrı takım maliyetinden kurtulmuş oluyorlar.

React Native ile Sıfırdan Bir Proje Kurulumu

Öncelikle React Native ile proje oluşturmak için Node versiyonunuzun 12 veya 12 den yüksek olduğundan emin olun. Bunu terminalinizde node -v komutu ile kontrol edebilirsiniz.

React Native projeleri 2 şekilde oluşturulur: reactnative.dev sitesine gittiğimizde bunu detaylıca görebiliriz. Bunlardan ilki Expo CLI, ikincisi ise React Native CLI.

Peki bunların farkı ne ?

Eğer daha önce hiç React Native ile proje geliştirmediysek Expo CLI ile proje oluşturmanız tavsiye edilir. Çünkü burada tek ihtiyacımız olan Node.js. Daha hızlı ve kolay proje oluşturmamızı sağlar ve IOS, Android proje dosyaları gibi karmaşık dosyaları yoktur. Daha basit ve temiz bir klasör yapısı vardır. Eğer mobil proje geliştirme ortamına aşina iseniz React Native CLI kullanabilirsiniz. Ancak bunun için bilgisayarınıza IOS ve Android Studio yüklemeniz gerek.

Ben Expo CLI tercih ettim.

Şimdi projemizi kurmaya başlayalım.

Terminalimizi açıyoruz ve aşağıdaki komutu yazıyoruz. Bu Expo CLI yüklememize yardım edecek.

npm install -g expo-cli ya da
yarn global add expo-cli

Yükleme tamamlandıktan sonra projemizi oluşturmak için aşağıdaki komutu yazalım:

expo init project-name

Karşımıza şöyle bir soru gelecek ve template seçmemizi isteyecek. Typescript kullanmayacağım için ve sıfırdan bir proje yaratacağım için blank seçeneğini seçiyorum ve enter’a basıyorum.

Ve projemiz oluştu. Projenin bulunduğu klasöre gidelim ve npm start diyelim.

Karşımıza şöyle bir ekran gelecek. Bu ekran projemizin geliştirici aracı ( developer tool )

Bu noktada projemizi canlıda görmek için similatör kullanabiliriz ya da gerçek cihazımızı kullanabiliriz. Simulatör için bilgisayarımıza indirme yapmamız gerek ancak fazla yer kapladığı için ben gerçek cihazımı kullanmayı tercih ettim. Bunun için de mobil cihazınıza Expo Go isimli bir uygulama indirmeniz gerek. Uygulamayı indirdikten sonra açıp QR kodunu okuttuktan sonra projeniz canlı haliyle mobil cihazımıza yansıyacak. Burada anlık tüm değişimleri görebileceğiz. Telefonu sallayarak da refresh yapabilirsiniz. Burada önemli olan bir nokta var ki bilgisayarınızın ve telefonunuzun bağlı olduğu ağ aynı olmalı.

Proje oluştuktan sonra klasör yapısına bakacak olursak aşağıdaki yapıyı göreceğiz. Assets klasörü img, video, audio oluşturacağımız klasördür.

React Native Component Yapısı ve Stillendirmesi nasıldır ?

React Native’in kendine has componentları vardır. Yapısı HTML’e benzemekle birlikte HTML etiketleri kullanılmaz. Onlara karşılık gelen başka etiketleri vardır.

Örneğin “p” etiketi için “Text”, “div” için “View”, “input” için “TextInput” gibi.

Ve mobil aplikasyonlarda css desteklenmediği için css kullanılmaz ancak css yapısına çok benzeyen bir stillendirme şekli vardır. Bir örneğini aşağıda paylaşalım. React Native StyleSheet componentini kullanır ve .create ile stillendirmemizi oluştururuz. Camel Case bir yapıya sahiptir ve objelerden oluşur. Daha sonra bu stilimizin etki etmesi için etiketimize “style={styles.container}” yazacağız ve böylece çalışmış olacak.

APK dosyası nedir ?

Uygulamamız hazır hale geldi. Ve biz bunu çalışan bir uygulama haline getirmek, gerçek telefonlarda test etmek istiyoruz. O halde bir APK dosyası oluşturmamız gerek. Ayrıca uygulamayı bu aşamada Google Play Store’da da paylaşabiliyoruz. Ben daha kolay olması açısından terminal ve Expo.dev websitesini kullanacağım.

Öncelikle expo.dev adresine gidip bir hesap oluşturalım. Daha sonra aşağıdaki kısımdan Snack diyelim ve yeni bir snack oluşturalım ve projemizi seçelim. Eğer editör kullanmak istemezseniz kodlarımız direk buraya geçtiği için burayı online bir editör olarak da kullanabilirsiniz.

Daha sonra terminalimize gidelim ve aşağıdaki komutları yazalım

expo login
expo password
expo build:android

Daha sonra aşağıdaki gibi bir soru gelecek. Buraya farklı bir proje ismi yazabilir ya da verilen ismi beğendiyseniz direk enter’a basabilirsiniz

Yükleme tamamlandıktan sonra yine expo.dev’e gidelim ve Build sekmesine tıklayalım. Ve aşağıdaki gibi APK dosyamızın oluştuğunu görebiliriz. Bu dosyayı indirelim. İndirdikten sonra istediğiniz kişi ile paylaşabilirsiniz. Böylelikle uygulamanızı dilediğiniz kişi görebilir.

Umarım sizler için faydalı bir yazı olmuştur, ben yazarken ve öğrenirken çok eğlendim. İyi okumalar :)