Gerçek uygulamalar React oluşturmak için en iyi yöntemler - Bölüm 1

Resim 1: React logolu soyut resim

Eğer React Native dünyasında yeniyseniz, bazı durumlarda muhtemelen ne kadar önemli olduklarını bilmeden seçimler yapmak zorunda kalacaksınız.

Aşağıda, kişisel deneyimimden, faydalı bulacağınızı umduğum en iyi uygulamaların bir listesini hazırladım.

Expo-Kit'i yalnızca tam olarak ne yaptığınızı biliyorsanız kullanın.

Expo, React Native için ücretsiz ve açık kaynaklı bir araç zinciridir. Muhtemelen React Native uygulamaları için piyasadaki en iyi kit, ancak sınırlamaları var.

Expo kullanın:

  • Çabuk bir oyun alanı istiyorsanız ve uygulamanızın deposunu oluşturmuyorsanız. Sadece create-react-native-app paketinin yardımı ile yeni bir uygulama oluşturun.
  • Uygulamanın genişletilmiş bir araştırma yaptıysanız, yapacaksınız ve tüm gereksinimleri Expo’nun sunduğu çözümlerden karşılanabilir.
  • Mac bilgisayarınız yoksa ve iPhone için de uygulamanızı kesinlikle oluşturmak istiyorsanız. Yürütülebilir IPA'lar oluşturmanın tek alternatifi budur.

Expo'yu kullanmayın:

  • Yerli Tepki için yeniyseniz ve bunun “gitmesi gereken” yol olduğunu düşünüyorsanız. Önce ihtiyaçlarınızı karşılayıp karşılamadığını kontrol edin.
  • Özel yerel modülleri olan üçüncü taraf RN paketlerini kullanmayı planlıyorsanız. Expo bu işlevi desteklememektedir ve bu durumda, Expo-Kit'i çıkarmanız gerekecektir. Bence, herhangi bir kiti çıkaracaksanız, ilk etapta kullanmayın. Bu, muhtemelen kiti hiç kullanmamış olmanıza göre daha da zorlaştıracaktır.

Genel olarak Expo'nun harika bir araç olduğunu düşünüyorum ve RN kod parçacıklarını paylaşmak için Expo Snack kullanıyorum. Ancak şu anda yalnızca belirli uygulama türlerini oluşturmak için yardımcı olabilir.

Uygulama klasörlerinizi / dosyalarınızı nasıl yapılandırabilirsiniz?

React React'i yapılandırmak Native uygulaması, React uygulamanızı yapılandırmaktan farklı değildir. Eğer buna aşina iseniz, mevcut mantığınıza bağlı kalabilirsiniz. Fakat değilseniz, belki aşağıda önerilen mantığı bulacaksınız:

Resim 2: Yerel uygulama React için dosya / Klasör yapısı
  • Köke “app” adlı bir klasör ekle
  • Uygulamanın içinde klasörler oluşturun:

varlıklar - Burada 3 klasöre kadar kullanıyorum: yazı tipleri, simgeler ve görüntüler

bileşenler - Bu, tüm paylaşılan React bileşenlerinizi yerleştireceğiniz yerdir. Genellikle bu bileşenler “kukla” dediğimiz, durum mantığı olmayan ve uygulamada kolayca yeniden kullanılabilen bileşenlerdir.

görünümler - Bunlar, uygulama ekranlarımızdır, birbirinden diğerine geçtiklerimiz. Bunlar aynı zamanda React bileşenleridir, ancak kendi konteynerlerini içerdiklerinden konteyner olarak adlandırdığımız bileşenlerdir.

modüller - Karşılık gelen görüş parçası olmayan parçaları vardır (JSX). Bunun tipik örnekleri, renkler modülü (tüm uygulama renklerini içerir) ve utils modülüdür (yeniden kullanılan yardımcı program işlevlerini içerir).

servisler - Bunlar, API çağrılarını saran işlevlerdir.

i18n - Bunlar farklı dil ve yerel ayar kullanıcıları için çeviri dizeleridir

Tüm uygulamalar bir tür yapılandırma gerektirir, bu yüzden genellikle config.js adlı bir dosya oluşturup buraya koyarım. Konfigürasyon dosyası çok fazla satıra ulaşırsa, daha sonra bir config klasörü oluşturabilir ve config dosyalarında ayrılabilir.

Bir devlet yöneticisi kütüphaneniz varsa, yapıları için de klasörlere ihtiyacınız olacaktır. Redux durumunda, biri eylemler için diğeri redüktörler için 2 klasör daha kullanılır. Harici bir paket kullanmazsanız ve React’in Context API'sini kullanmayı tercih ederseniz, ya modüller klasörüne ya da sağlayıcılar adı verilen yeni bir klasöre yerleştirilebilecek kendi sağlayıcılarınızı oluşturacaksınız.

İhtiyaçlarınıza göre en baştan bir navigasyon kütüphanesi seçin

Maalesef, RN henüz sağlam bir çözüm sunmadı ya da eski Navigator bileşeninin yerini bile aldı, bu yüzden şimdi topluluk çözümlerine odaklanıyoruz. Dolayısıyla, bir projeye başlamak üzereyseniz, hangi navigasyon kütüphanesinin kullanılacağını ve sizin için doğru olanın olup olmadığını bilmek istersiniz.

Genel olarak iki tür gezinti kütüphanesi vardır. JavaScript gezginleri ve Yerel gezginler. JavaScript olanlar JavaScript ile yazılırken, Yerliler ilgili platformun yerel modülleri (Android, iOS) olarak yazılır ve kodda çağrılmak üzere JavaScript modüllerine bağlanır. Birincisi kurulumu çok daha kolaydır, ikincisi çok daha başarılıdır. Hangisine ihtiyacınız olduğunu bulmak için zaman ayırın ve ardından oradaki birçok kişiden birini seçin.

Spencer Carli, okumanızı tavsiye ettiğim bu makalede, React Native dünyasındaki mevcut Navigasyon seçenekleriyle ilgili olarak harika bir iş çıkardı. Baskın seçenekler, JavaScript çözümü olarak Navigasyonu React ve Yerel çözümü olarak Yerel Navigasyonu React'tir.

Rahatlık için bir CSS in JS sarmalayıcı kitaplığı kullanın

React Native'de, CSS JavaScript'te yazılmıştır. Seçme şansımız olmayan bir şey. Şahsen StyleSheet.create yöntemini ve CSS kodunu saf JavaScript olarak kullanmak yerine, Styled Components kütüphanesini kullanmayı tercih ediyorum. Tarzlı Bileşenler, CSS yazmayı yeniden sezgisel hissettirir ve JSX'i daha semantik gösterir.

Son zamanlarda, React Native uygulamalarında Stilli Bileşenler'i neden tercih ettiğime dair bir makale yazdım, böylece daha fazla ayrıntı için oraya bir göz atabilirsiniz.

Uygulamanızın farklı cihazlarda ve ekran boyutlarında nasıl ölçeklendirmesini istediğinize erken karar verin

Muhtemelen, birden fazla cihaz boyutu ve ekran boyutu için bir uygulama geliştiriyorsunuz. Şimdi burada tasarımınıza / gelişiminize nasıl yaklaşacağınız konusunda iki seçenek var.

Ekran boyutuna bağlı olarak farklı UI / UX olmasını seçebilirsiniz. Bu, çoğu uygulama türü için muhtemelen en iyi seçenektir, ancak tasarlanması ve uygulanması için birden fazla ekran olduğundan çok fazla çaba gerektirir. Ekran boyutları, Boyutlar API'sı aracılığıyla tanımlanabilir. Alternatif olarak, React Native Responsive UI gibi kutudan bazı yardımcı programlar sağlayan bir üçüncü taraf paketi kullanabilirsiniz.

Veya tüm ekran boyutları için orantılı olarak ölçeklenecek aynı UI / UX'e sahip olmayı seçebilirsiniz. Bu, örneğin bir oyun geliştirirken en iyi seçenektir. Yine, Native Responsive Screen React gibi bir başarı elde etmek için bir üçüncü taraf paketini kullanabilirsiniz.

Feragatname: React Native Responsive Screen paketinin üreticisiyim.

Animasyonlara dikkatle yaklaşın

Mobil uygulamalar için animasyonlar çok önemlidir, ancak React Native’ın performansı henüz en iyi değil.

Kendinizi kötü sonuçlar elde etmekten korumak için, cihazdaki animasyonları her zaman test etmeniz gerekir - emülatör uygun geri bildirim sağlamaz. Ayrıca, kullanabileceğiniz her yerde prop useNativeDriver (değeri true olarak ayarlanmış) kullanmanız gerekir, çünkü daha iyi performans elde etmenize yardımcı olacaktır.

Daha iyi performans elde etmenin nasıl sağlanacağı hakkında daha fazla ipucu için bu önceki makaleme bir göz atın.

Ayrıca aklınızda bulundurun…

  1. Tepki Yerli, DOM öğelerine sahip değil. Bunun yerine, doğal unsurlarla uğraşıyoruz.
  2. CSS hakkında:
  • Tüm özellikler desteklenmez; en azından henüz değil. Daha fazla bilgi için belgelere bakın: Stil Aksesuarlarını Görüntüleyin, Görüntü Stil Aksesuarları, Metin Stil Aksesuarları
  • Kestirme özellikler iyi çalışmaz, bu nedenle her zaman belirli olanları tercih edin (ör. Kenar boşluğu, kenar boşluğu, kenar boşluğu, kenar boşluğu yerine sağ kenar boşluğu)
  • Tüm özellikler yüzde değerlerini desteklemez. Birkaç söz: kenar boşluğu, sınır genişliği ve sınır yarıçapı. Ve eğer biri yüzde değeri belirlemeye çalışırsa, RN ya tamamen görmezden gelecek ya da uygulama çökecektir.
  • RN, kutudan esnek destek sağlar. Öğren ve ne zaman istersen kullan. En iyi CSS müttefiki sizsiniz!

Ne düşünüyorsun?

Bu makale hakkında ne düşünüyorsunuz? Aklında başka hangi en iyi uygulamalar var? Perspektifinizi ve fikirlerinizi aşağıdaki yorumlar bölümünde sunun.

Bu makaleyi beğendiyseniz, başkalarının bulmasına yardımcı olmak için bu alkış düğmesine basmaktan çekinmeyin.

Benim hakkımda

Merhaba, ben Tasos'um; Web'i seven ve şu anda React Native ve React ile çok çalışan bir yazılım mühendisi. Uygulama içi pazarlamaya önem vererek uçtan uca mobil ve web projeleri gerçekleştirdiğimiz Coded Lines yazılım ajansının kurucusuyum. Eğer aradığınızı söylerse, lütfen benimle burada iletişim kurun: tasos.maroudas@codedlines.com. Uğradığınız için teşekkürler :)

___________________________________________________________________

Teşekkürler

Kanıt okumak için George Karboulonis