2019 ReactJS En İyi Uygulamaları

[güncelleme, 22 Mayıs 2019, 2019] - Listeye bir tane daha uygulama ekleyin. Aşağıya bakınız.

[güncelleme, 19 Mayıs 2019] - Redux ve Redux-Thunk hakkında yeni bir makale ekledik. Basitçe birçok örnekle açıklanmıştır.

[güncelleme, 23 Temmuz 2019] - Birçok istek nedeniyle ReactJS ANTIpatterns hakkında yeni bir makale ekleyeceğiz. Bağlantı burada yayınlanacaktır. Lütfen bir alkışla destekleyin. Teşekkür ederim!

1. lütfen hoşgeldiniz, ReactJS

Son beş yıldır ReactJS popülaritesinde hızla artıyor ve 2018 başlarında en azından Google aramaları açısından jQuery'den daha popüler hale geldi. Arama motorlarındaki talepleri açısından araçları karşılaştırmayacağız; Ancak, bu bize ReactJS kütüphanesinin kesinlikle popüler olduğunu açıkça ortaya koyuyor. Bununla birlikte, daha iyi Front-End uygulamaları oluşturmak için ReactJS kullanımı hakkında konuşalım.

Yazılarımızı beğeneceğinizi görmek bizi gerçekten çok mutlu ediyor. Eğer bu yazıyı yararlı buluyorsanız, lütfen aşağıdaki düğmesine dokunun :)

ReactJS'i Facebook'un yarattığı gerçeğinin yanı sıra bu kadar popüler yapan şey nedir? ReactJS ile çalışmak için basit olması nedeniyle düşünüyoruz. Öğrenmesi kolaydır ve sanal DOM kullanarak performans için optimize edilmiştir. Sanal DOM uygulayarak, ReactJS bir oluşturma motoruna yalnızca güncellenmesi gereken öğeleri hızlı bir şekilde yeniden oluşturma yolu sunar. Sonuç olarak, ReactJS geliştiricileri hızlı ve kullanımı kolay uygulamalar elde ediyor.

ReactJS, uygulamalar oluşturmak için JavaScript kullanan bir kütüphanedir. ReactJS'de uygulama oluşturmaya başlamak için API'sini öğrenmeniz ve JavaScript'i bilmeniz gerekir. JavaScript, muhtemelen bugünlerde en popüler programlama dilidir. ReactJS ayrıca geliştiricilerin UI bileşenlerinde bir uygulamayı modellemesini ve tanımlamasını sağlar. Yani ne yapman gerektiğini söylüyorsun ve ReactJS nasıl yapılacağını biliyor.

Google’ın son beş yılındaki eğilimleri:

Temel ReactJS konseptlerinden biri, bir araya getirilebilen ve bir uygulama oluşturabilen yeniden kullanılabilir, uyumlu bileşenler yaratmanızdır. Devletten az olmadıkça, her bir bileşen kendi durumuna sahip olabilir (daha sonra bu konuda daha fazla). ReactJS, tüm bileşenlerinizi tek bir kovada toplar ve uygulamayı tarayıcınızda verimli bir şekilde oluşturmak için sanal DOM gibi bazı optimizasyon tekniklerini uygular.

Bir bileşenin ne olduğunu ve ne olmadığını açıklığa kavuşturarak başlayalım. Bileşen, kullanıcı arabiriminin kendine yeterli, bağımsız bir parçasıdır. Her bileşen, her birinin kendi durumuna ve API'sine sahip olduğu diğer bileşenleri gömebilir. Kurallara göre, bileşenle ilgili kodunuzu belirli bir klasörde tutmalısınız. Her bileşen için tüm dosyaları tek bir klasörde tutmak, diğer uygulamalarda kullanabilmeniz için yeniden kullanılabilir bileşenler oluşturmanıza olanak sağlar.

2. ReactJS bileşenlerinin türleri

Dört ana ReactJS bileşeni türü vardır:

  1. Devlet dolu veya sınıf tabanlı bileşenler
  2. Devlet gerektirmeyen veya fonksiyon temelli bileşenler
  3. Sunum (veya yüksek dereceli) bileşenler
  4. Konteyner bileşenleri

Bileşenler ağacınızın tercih edilen bir yapısı solda görüntülenir.

Durum dolu bileşenler veya sınıf tabanlı bileşenler

Durum dolu bir bileşen, durum ve durumla ilişkili verilere sahiptir. Bu tür bir bileşenin içine veriyi durum veya destek nesneleri üzerinden aktarabilirsiniz. Durum dolu bileşenlerin bazı verileri sürdürdüğü ve uygulamanın genel durumunu değiştirebileceği için desteklemesi daha zordur. Ayrıca, durum dolu bileşenler genellikle bir kurucuya sahip olan sınıf temelli bileşenlerdir (yapıcıdaki bileşeniniz için durum belirlemek için en iyi yöntem olarak kabul edilir).

İşte durum dolu, sınıf tabanlı ReactJS bileşeninin bir örneği:

Problar değişmezdir ve bir devlete tek yönlüdür ve bu yüzden onları kendi bileşeniniz içinde değiştiremezsiniz. Bileşen için bir durum belirlemek ve kullanıcı arayüzünü oluşturmak için destek kullanın. Bileşeninizdeki donanımları değiştirmeye çalışırsanız, bir Yazım Hatası alırsınız.

Devlet, bir bileşene maruz kalan bir nesnedir. Devlet kapsamı, ilan edildiği bileşenin içinde sınırlandırılmıştır. Bileşenler durumu başlatabilir ve başka bir bileşene geçirebilir. Yapıcı kullanarak veya durum özelliğini bildirerek bir durumu iki şekilde ilan edebiliriz. İkinci durumda, bu sadece sözdizimsel bir şekerdir ve verici (Babil gibi), mal mülk beyannamesini kaputun altında sizin için yapıcıya çevirir. Devlet gerektirmeyen bileşenler veya işlev tabanlı bileşenler ve İşlev tabanlı bileşenler için React Hooks'un ne olduğu yalnızca basit JavaScript işlevleridir. İşlev tabanlı bileşenler, bir ReactJS öğesini veya <> ... gibi “kısmi bir bileşen” olabilen bir koleksiyon veya mantık ve gömülü bileşenlerle tamamen işlev tabanlı bir bileşen olarak geri döndürür. Bir yapıcıyı işlev tabanlı bir bileşende kullanamadığınız için (aslında ReactJS v16.8'ten beri yaparsınız) bileşeninizi tam olarak yapamazsınız. Bu durum azdır, çünkü bu tür bileşenlerde hiçbir veriyi kaldıramazsınız. En sık kullanıcı arabirimini oluşturmak için işlev tabanlı bileşene sahne alırsınız. İşte durumsuz, işlev tabanlı ReactJS bileşeninin bir örneği:

Performans açısından, sınıf temelli bileşenlerin kullanımı ile işlev temelli bileşenlerin kullanımı arasında pratik olarak bir fark yoktur. ReactJS oluşturma mekanizması bizim için bunu optimize edecek kadar akıllıdır.

İşlev tabanlı bileşenlerin kullanımı daha kolay ve test edilmesi daha rahat. Bu nedenle ReactJS geliştiricileri topluluğunun sizi sınıf temelli işlevler yerine işlev tabanlı bileşenler yazmanıza teşvik edecektir. Devlet gerektirmeyen fonksiyon temelli bileşenlerin bazı sınırlamaları vardır ve esasen devleti yönetmek için tek bir küresel yere sahip olmaları gerekir. Bu, ReactJS yazma bileşenleri paradigmasından farklıdır (daha fazla ayrıntı için aşağıya bakınız).

Geliştiricilerin durum dolu, işlev tabanlı bileşenler yazmasını sağlamak ve aynı zamanda durum ve bileşen yaşam döngüsü yöntemlerini kullanma yeteneği vermek için, React v16.8, React Hooks adlı yeni bir özellik ekledi. Temel olarak, React Hooks, sınıf tabanlı bileşenleri kaldırma girişimidir. React Hooks ile durum kullanmadan fonksiyon bazlı bileşenleri sınıfları kullanmadan yazabilirsiniz. Muhtemelen gelecekte bir noktada Hooks ile elimine edilen sınıf bazlı bileşenleri göreceğiz.

React Hooks ayrıca, sınıf olarak ilan edilmesine rağmen yapıcıya sahip olmayan veya gerekmeyen bileşenlerden kaçınarak uygulama tasarımını basitleştirmeyi amaçlamaktadır. Uygulamanızın ideal tasarımını düşünüyorsanız, genellikle devletsiz bileşenlerle çalışırsınız. Müşterilerimiz için ReactJS uygulamaları oluştururken, genellikle bileşen gösterimlerimiz ve uygulamanın mantığı arasında ince bir katman kullanırız. Bu, bileşenin görsel temsilini davranışından ayırmamıza izin verir.

3. Veri Aşağı, Eylemler-Yukarı

«Veri Aşağı, Eylemler Yukarı» tasarım deseni nedir? Temel olarak, bu verileri 'props''larında kabul eden ve bu verileri kendi görünümüne veya iç içe bileşenlerine aktaran bir Üst Düzey Bileşene (HOC - aşağıdaki açıklamaya bakınız) sahip olduğunuz anlamına gelir. Bileşenle etkileşime geçmek için kullanıcılar bir düğmeye basma gibi eylemleri tetikler ve bileşen bu etkileşime olayları yayarak yanıt verir. Söylemek gerekirse, bu verilerin nasıl iletildiğinin tersi yönde bir olayı tetikler.

Bu olaylar veya eylemler bir ana bileşene geçirilir. Ana bileşen, genel uygulama durumunu değiştiren başka bir işlemi tetikler.

4. Yüksek Sipariş Bileşeni

Yüksek Dereceli Bileşen (veya HOC) temel olarak Dekoratör Kalıbı olarak da bilinen bir tasarım desenidir. ReactJS'de HOC, ekstra işlevsellik veya ekstra özellikler ekleyerek başka bir bileşeni saran bir bileşendir. Bu, sık kullanılan bazı mantıklardan soyutlamaya izin verir ve DRY kodunuzu tutar. Bu, karmaşık bileşen yapısını ReactJS'teki diğer bileşenler arasında dağıtmanız ve uygulama mantığınızı ve kullanıcı arabiriminizi ayırmanın bir yoludur. Örneğin, container bileşenini sunumsal Button bileşeniniz için HOC olarak kullanabilirsiniz.

İşte HOC ReactJS bileşeninin bir örneği:

5. Konteyner bileşenleri

Öte yandan, konteyner bileşenleri durum belirleme mantığına veya ana bileşene kadar olayları yayınlama işlevlerine sahiptir. Genel kural, bileşeninizi tek bir Sorumluluk İlkesi tasarım ilkesiyle mümkün olduğu kadar basit tutmaktır, bu da bileşeninizin bir şeyi yapması gerektiği anlamına gelir; Çoğu zaman, bu tip bileşenler, az sayıda sunum bileşenini barındıran HOC'lerdir. Sunum bileşenleri Basit bileşenler yazmak, genel uygulama karmaşıklığınızı azaltabilir. İşte sunum bileşenleri devreye giriyor. Bu bileşenler minimum veya hiç mantıksız olmalıdır. Sunum bileşenleri verileri kabul eder ve olayları, bir parçası olarak aldıkları bir geri aramaya gönderir. Temel olarak, bu tip bileşen kullanıcı arayüzünü oluşturur ve kullanıcı arayüzünde bir işlem yapıldığında kendisine geçen bir işlevi yerine getirir. Bu tip bileşen bir yapı taşıdır ve bazen Düşük Sıralı Bileşen (veya LOC) olarak da adlandırılır.

6. En İyi Uygulamalar Listesi

  • [Güncelleme 22 Mayıs 2019, 2019] - ReduxJS kullanırken, Redüktörünüzde devasa JSON'u önlemek için Redüktör kodunuzu daha küçük yöntemlere bölün.
  • Zaten yapmadıysanız, uygulamalarınızda TypeScript kullanmayı düşünün.
  • ReactJS uygulamanızı önyüklemek için create-react-app jeneratörünü kullanın.
  • DRY kodunuzu saklayın. Kendinizi Tekrar Etmeyin, ancak kodun yinelenen kodunun her zaman kötü bir şey DEĞİL olduğunu unutmayın.
  • Redüktörler de dahil olmak üzere büyük sınıflara, yöntemlere veya bileşenlere sahip olmaktan kaçının.
  • Redux gibi uygulama durumlarını yönetmek için daha güçlü yöneticiler kullanın.
  • Arka uç API'nizle etkileşimler için Redux-Thunk gibi olay senkronizatörü kullanın.
  • Çok fazla özellik veya argüman iletmekten kaçının. Kendinizi bileşeninize aktardığınız beş sahne ile sınırlandırın.
  • ReactJS defaultProps ve ReactJS propTypes öğelerini kullanın.
  • Linter kullanın, çok uzun olan satırları bölün.
  • Kendi jslint yapılandırma dosyanızı saklayın.
  • Daima NPM veya iplik gibi bir kilit dosya olan bir bağımlılık yöneticisi kullanın.
  • Sık erişilen kodunuzu, karmaşık ve hatalara açık kodunuzu test edin.
  • Doğru çalışmasını sağlamak için, kodunuz için daha az test ve daha fazla test kapsamı sağlayan daha fazla test yazın.
  • Her hata bulduğunuzda, önce bir test yazdığınızdan emin olun.
  • Durum dolu bileşenler yaratmanın yeni bir ReactJS yolu olan React Hooks'u kullanmaya başlayarak işlev tabanlı bileşenleri kullanın.
  • Ürününüz için ES6'nın yeniden yapılandırmasını kullanın.
  • Koşullu oluşturmayı kullanın.
  • Kullanıcı `map ()` bileşenlerini toplamak ve oluşturmak için.
  • `<>`… `` Gibi kısmi bileşenler kullanın.
  • Etkinlik işleyicilerinize `handleClick ()` veya `handleUpdate ()` gibi tanıtıcı önekleriyle ad verin.
  • Girişlerinizi kontrol etmek için `onChange = {this.handleInputChange ()}` gibi `onChange'i kullanın.
  • ReactJS kodunuzu test etmek için JEST kullanın.

Redux-Thunk gibi olay senkronizatörlerinden bahsettik. ReactJS v16.3, React Context API adlı yeni bir özellik sundu. İşlevselliğinin bir kısmı redux-thunk işlevselliğini taklit etmek ve olayları ReactJS araçlarıyla senkronize etmektir. Bu, neredeyse her ReactJS uygulamasının API'yi sonlandırmak için konuşması ve istekleri ve olayları senkronize etmesi gerektiğinden, yüksek talep gören bir özelliktir. Bu API'ye göz kulak olacağız ve sizi bilgilendirmelerden haberdar edeceğiz.

İşte defaultProps ve propTypes kullanımına bir örnek:

7. Karar

Umarız bu makale, 2019’da çok popüler olan ReactJS’in en iyi uygulamalarına ve kalıplarına ışık tutmaktadır. Bonus olarak, aşağıda başka bir makaleye bakın; ücretsiz güncellemeler ve ReactJS hakkında yeni güncellemeler almak için yeni öğrenme materyalleri için kaydolabilirsiniz. Bir şey daha var…

Alkışına gerçekten ihtiyacımız var! Bu yazıyı yararlı buluyorsanız, lütfen aşağıdaki düğmesine dokunun :) İşte size ilk işte. Müthişsin!

.

Bonus materyali: İşte Redux ve Redux-Thunk hakkındaki son makalemiz. İkisinin birlikte nasıl çalıştığını açıklayacağız.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188