React Native
React Native ile Uygulama Geliştirmek
Volkan ŞENGÜL
@volkansengul
React Native Nedir?
Sihirli değnek değil !
RN Neden Ortaya Çıktı
- Kısa zamanda
- Az kişi ile
- En düşük maliyet ile
- Her platforma uygulama geliştirmek için
Neyi Hedefliyor?
- Javascript
- Web Geliştirme yapar gibi
- HTML -> JSX
- Css
Neden React Native
- Tamamen Native !
- Javascript bilmek yeterli
- Hot Reloading / Live Reloading
- Güçlü bir topluluk
- UI Inspector
- Geliştirme aşamasında yüksek verimlilik
Kimler Kullanıyor
- Bloomberg
- Uber
- Wix
- WallMart
- Discord
- ...
Kurulum
https://facebook.github.io/react-native/docs/getting-started
Uygulama Oluşturmak
react-native init myapp
Nasıl çalışır?
RN Temel Yapıtaşları
- React
- UI Componentleri
- Sistem API'leri
- 3rd Party Component
- Styling ( css / flexbox )
RN Temel Yapıtaşları
-
State Yönetimi
- Redux
- Mobx
- Hooks ?
-
Navigation
- react-navigation
- react-native-navigation
React
- JavasScript Tabanlı
- UI Component Kütüphanesi
- Shadow DOM != Virtual DOM
UI Componentler
- View
- Button
- Text
- TextInput
- TouchableOpacity
- Image
Sistem API'leri
- AppState
- Vibration
- Keyboard
- Linking
- Dimensions
- Share
- Alert
- Netinfo
3rd Party Component
- JavaScript + Native
- linking ?
Styling
- Css ?
- Flexbox
React : İyi
React : Kötü
React : Çirkin
Fundamentals
React için önemli kavramlar
Component
Props (Stateless Data)
- Render maliyetini azaltır
- Değişmeyecek veriler için kullanılır
State (Statefull Data)
- Değişebilir veriler için kullanılır
- Her değişimde o bileşen yeniden render edilir
- this.state şeklinde erişilir ve this.setSate ile tanımlanırlar
JSX
- JSX ⇒ (Transpilers) ⇒ JS
- XML benzeri sözdizim
Kurallar
<element></element> // doğru
<element/> // doğru
<element> // yanlışAçılan eleman mutlaka kapatılmalı
Alt elemanlar tek bir eleman içinde sarmalanmalı.
// doğru
(<element>
<element1/>
<element2/>
</element>)
//yanlış
(
<element1/>
<element2/>
)