React Native Öğrenim Sürecim ve Örnek Haber Uygulaması

Uzun süredir React Native öğrenip bir şeyler yapmak istiyordum, koronavirüsü sebebi ile evde kaldığımız bu süreçte de React Native öğrenmeye başladım. Birkaç ufak deneme yaptıktan sonra bildiklerimi bir uygulama üzerinde birleştirmeye karar verdim.

Bu yazının amacıda aslında iki haftalık süreçte ki React Native tecrübemi ve uygulamamı sizinle paylaşabilmek, dediğim gibi React Native ile ilgili iki hafta önce bir şeyler yapmaya başladım bu yüzden bu yazının birçok kısımı fikirlerime dayanmaktadır. 🙂

1) React Native Öğrenme Sürecim

React Native öğrenebilmek amacı ile Udemy üzerinden bir eğitim setine başladım, fakat eğitmen React bildiğimizi varsayarak ilerliyordu bu sebeple bazı şeyler mantığıma oturmadığı için internet üzerinde bolca araştırma yapmam gerekti. Sanırım bu süreçte ki en büyük hatam bence temel React bilgim olmadan React Native öğrenmeye başlamamdı.

Eğitim videosunda veya internette yaptığım araştırmalar karşılaştığım bir diğer sorun ise React Native sürekli güncellendiği için sanırım birçok şey çabuk değişmekte. Eğitimde ki kodları Github üzerinden alıp direkt uygulama yapıştırsam dahi patladığı yerler oluyordu bu yüzden ilk etap benim için biraz sancılı fakat bir o kadar da keyifli geçti.

2) React Native ile Tasarım

Eğer temel HTML + CSS yapısını biliyorsanız React Native öğrenme sürecinizde tasarım alanı çok daha kolaylaşabilir. Özellikle tasarım alanında neredeyse sadece syntax değişiyor diyebilirim. Bu yüzden öğrenim sürecimde en kolay adapte olduğum tasarım kısmıydı tabi ki burada sınırları ne kadar zorladığım tartışabilir. Ayrıca bu noktada açık kod kaynaklı (open source) olarak birçok framework ile sunulan componentleri kullanabiliyorsunuz bu da bence çok güzel bir avantaj.

Bu süreçte animasyon ve geçişlere çok fazla bakmadım fakat birkaç örnek inceledim, bu alanda da  React Native’in son derece başarılı olduğunu düşünüyorum.

3) Component Yapısı ve 3. Parti Kütüphaneler

React üzerinde ki component mantığı aynı şekilde React Native üzerinde de mevcut. Bu felsefe tasarım ve projeyi geliştirme sürecinde size çok fazla yardımcı oluyor. Ayrıca internet üzerindeki hazır componentleri de çok rahat bir şekilde projenize dahil edebiliyorsunuz.

Eğitime ilk başladığımda projeye birçok kütüphane kurmam gerekti, ilk başta bu dezavantaj gibi gözükse de aslında React Native temelini component gibi düşünürseniz sadece ihtiyaçlarınızı projeye eklemek oldukça güzel, ayrıca uygulamanın da performansına pozitif katkı sağlamakta.

4) React Native Geliştirici Topluluğu

Uygulamayı geliştirme sürecinde React Navigation, React Redux, Firebase gibi birkaç tane framework kullandım. Bunun dışında birçok noktada takıldığım için internette bolca araştırma yapmam gerekti ve genel olarak React Native geliştirciği topluluğunun çok güçlü olduğunu söyleyebilirim. En ufak bir sorun ile ilgili dahi onca kaynak bulabiliyorsunuz, ayrıca React Native kendi dokümantasyonu da çok güzel, takıldığınız noktalarda kolayca anlayabileceğiniz açıklamaları sitesinde bulabilirsiniz.

Burada temel olarak benim yaşadığım sorun dediğim gibi sürümler arasında sanırım birçok şey değişmiş, çünkü sorunları çözerken bir çoğunda kolayca çözüme ulaşamadım bu yüzden sorunlara ilk React Native veya kullandığınız kütüphanenin kendi sitesinden bakmanızda fayda var.

5) Eğitim Kaynakları

Açık konuşmak gerekirse Udemy üzerindeki React Native kurslarından çok verim alamadım, bu yüzden bu noktada bence ilk etapta React öğrenmeniz sizin için daha iyi olacaktır.

Temel React bilginiz var ise Youtube üzerinde Adem İlter’in yayınladığı React Native ile Türkçe Sözlük Uygulaması Yapımı video serisine mutlaka bakın, hem izlerken sıkılmıyorsunuz hem de bir uygulamanın baştan sona gelişim sürecini görebiliyorsunuz.Adem İlter’in youtube kanalına gitmek isterseniz buraya tıklayabilirsiniz.

Bir diğer önerim ise Medium üzerinde güncel olarak React Native ile ilgili içerikler paylaşan Zafer Ayan’ı takip etmeniz. React Native ile ilgili birçok konuda içerik hazırlıyor, ayrıca sosyal medya üzerinde de takip etmenizde fayda var. Zafer Ayan medium sayfası için buraya tıklayabilirsiniz.

Haber Uygulaması

Eğitimlerde  temel bilgileri edinince kendim bir proje yaparak hem yeni şeyler öğrenmek hem de ortaya bir ürün çıkartmak istedim. Bunun için ücretsiz kullanılabilen News Api ile bir haber uygulaması yapmaya çalıştım.(News Api 600 istek ile (request) limitli, eğer limitiniz biterse başka mail adresinden tekrar api key alabilirsiniz.)

Projede kullanıcı girişi için Firebase kullandım, eğer kullanıcı yok ise otomatik kendi oluşturuyor ve login olabiliyor. Bunun dışında state yönetimi için Redux, navigation yapısı için ise React Navigation kullandım.

Proje temelde bir şeyler öğrenebilmek için yaptığımdan dolayı gereksiz aksiyonlara da girmek istedim. Üyelik işlemi bunlardan biri, sadece Firebase  denemek istedim.

Redux ise state yönetimi için kullanılıyor temelde canlıya çıkacak her projede muhtemelen ihtiyaç duyulacak bir özellik fakat benim yaptığım uygulama da state yönetimine ihtiyaç duymayabilirsiniz fakat öğrenmek ve temel mantığı anlamak için basit bir uygulamada yapmak bana  mantıklı geldi.

Haberlerin listelendiği yapı çok sadece olmaması için slider yapmaya karar verdim. Bunun için Scroll View’u yatay olarak kullandım fakat bu yapıyı FlatList ile de yapabilirmişim, sonradan öğrenince değiştirmek istedim.

İçeriklerin listelendiği yapıda ise FlatList kullandım, burada şöyle bir sorun ile karşılaştım FlatList kendi içinde zaten scroll yapısına sahip olduğu için React Native Scroll View componentin içindede (child) olarak FlatList kullanılmasına karşı çıkıyor, buna sebep olarakta performansı belirtiyor. (Birazdan performans farkını açıklayacağım). Ayrıca ScrollView içeresinde FlatList kullandığım zamanda sayfa sonuna gelince yeni haberlerin yüklenmesi kısmı çalışmıyordu.

Benim kurduğum yapıda sırası ile ;

<ScrollView/>  –> Kapsayıcı

<ScrollView/> –> Slider

<FlatList/> —> Haber Listesi

bulunuyordu, burada scroll view zaten olduğu için React Native kızıyordu, bu durumda kapsayıcı ScrollViewi kaldırdım ve FlatList Header component olarak slider ScrollViewını ekleyerek hepsini aslında FlatList componenti ile kolayca halletim. (Bulmam biraz uzun sürdü, Aybars Yalçın’a yardımı için teşekkür ederim. 🙂 )

Gelelim ScrollView ile FlatList arasında ki performans farkına,  scroll view içeresindeki itemların hepsini bir anda render ediyor fakat bu itemları ramde tuttuğu için performans düşüşü olabiliyor, flat list ise itemları ekran içeresinde olmadığı sürece render etmiyor, sadece sayfa içeresinde gözüken itemlar render ediliyor.

Genel olarak projem ile ilgili anlatacaklarım bu kadar, ayrıca incelemek veya localinizde çalıştırmak isterseniz Github üzerinden kaynak kodları görebilirsiniz.

Son olarak React Native ile yaptığım projenin kaynak kodlarına Github üzerinden erişmek için buraya tıklayabilirsiniz.

1 Comment

Leave a Comment