PRDXN’in En İyi Uygulamalarına Tepki

Facebook’un React’i, kullanıcı arayüzleri oluşturmak için bildirimsel, etkili ve esnek bir JavaScript kütüphanesidir.

React'te kod yazmaya başladığımda, öğreticiden öğreticiye kadar çok farklı yaklaşımlar gördüğümü hatırlıyorum. Bu yüzden PRDXN'deki ekibim ve ben hepimizin daha hızlı ve daha hızlı ilerlememize yardımcı olacak en iyi uygulamaların (BP'ler) bir rehberini / listesini çıkardık.

Facebook’un React'i, kullanıcı arayüzleri oluşturmak için bildirici, verimli ve esnek bir JavaScript kütüphanesidir (UI).

Aşağıdakiler bizim rehberimiz. Bunun, React’in benimsenmesini ve kullanılmasını hızlandırmanıza yardımcı olacağını umarız; Yeni başlayanlar için mi, yeni başlayanlar için mi yoksa deneyimli bir geliştiriciden mi.

1. Organize Klasör Yapısını Koruyun:

Herhangi bir programlama / kodlama projesinde olduğu gibi, bu çok önemlidir! Proje dosyalarınız mantıklı bir şekilde organize edilmediyse, siz ve ortak çalışanlarınız kafanız karışabilir ve dosyaları aramak veya yanlış dosyaları düzenlemek için değerli zamanınızı harcayabilirsiniz.

PRDXN'de, işleri kolaylaştırmak ve herkes için daha az sinir bozucu yapmak için aşağıdaki klasör yapısını bulduk. İzlemek için oyna tıklayın.

2. Bileşenler - Topaklar ve Ağaçlar. Hey, sen bir Javascript Oduncu'sın!

Bileşenler bir Tepki'nin kalbidir. Bir React bileşeni temel olarak bir UI'nin herhangi bir parçasıdır.

Mantıksal UI parçaları oluşturma (gruplamalar): Bileşenlerinizi her zaman parçalara (aka mantıksal gruplar) bölün. Herhangi bir uygulama arayüzünü göz önünde bulundurun ve kullanıcı arayüzünü daha küçük mantıklı parçalara bölmeye başlayın. Bu UI parçalarının (gruplar) her biri potansiyel bileşenlerdir.

Ağaç, Dallar ve Alt Dallar: Kullanıcı Arabiriminin (ağaç veya gövde) tam / tam görünümü, mantıksal parçalara (aka dallar) bölünmüştür. Ağaç başlangıç ​​bileşeni (bir düzen bileşeni) haline gelir ve daha sonra UI (aka dalı) içindeki her bir öbek, alt bileşenlere (yani alt dallar) bölünebilecek bir alt bileşen haline gelir. Bu UI'yi organize tutar ve ayrıca veri ve durum değişikliklerinin ağaçtan dallara ve sonra da alt dallara mantıksal olarak akmasını sağlar.

Mantıksal UI Gruplamaları (Öbekler) Yaratın: Ağaç, Dallar, Alt Dallar!

3. Bileşenler - İşlevsel ve Sınıf Tabanlı:

İki tür bileşen vardır: işlevsel ve sınıf tabanlı.

Ne zaman işlevsel bir bileşen ile gitmeliyim? Bileşeniniz sahne oluşturma işleminden daha fazlasını yapmıyorsa, işlevsel bir bileşenle devam edin. İşlevsel bileşenleri saf işlevler olarak düşünün: aynı aksesuarlar göz önüne alındığında her zaman aynı şekilde davranacak ve aynı şekilde davranacaklardır. Ayrıca, yaşam döngüsü yöntemleri umrunda değil; bunlar vatansız unsurlardır.

İşlevsel bileşen, örnek.

Sınıf temelli bir bileşene ne zaman gitmeliyim? Bileşeniniz dahili durum ve bileşen yaşam döngüsü yöntemlerine ihtiyaç duyuyorsa, sınıf tabanlı bir bileşen kullanın. “İç devlet” ve “yaşam döngüsü yöntemleri” hakkında daha fazla bilgi edinmenize yardımcı olmak için bunu kontrol edin.

Sınıf temelli bileşen, örnek.

4. Sahne! Size sahne! Bana sahne! Ama hayır, React Props'tan bahsediyoruz!

“Kavramsal olarak, bileşenler JavaScript işlevleri gibidir. Keyfi girdileri kabul eder (“sahne” olarak adlandırılır) ve ekranda görünmesi gerekenleri açıklayan React öğelerini döndürürler. ”Kaynak için tıklayın.

Develeri getir! Hayır, o develeri tatlıda bırakabilirsin. Burada CamelCase ile konuşuyoruz. Prop isimleri için daima camelCase kullanın. Ayrıca aksesuarlar nitelik olarak görülebilir ve React tarafından ayarlanan kural, JSX özellikleri için camelCase kullanmaktır.

Prop isimleri için daima camelCase kullanın.

İnan bana, doğru, yemin ederim! Açıkça doğru olduğu zaman pervane değerini atlayın. Bir pervaneye gerçek bir değer vermesek bile, gerçek bir değer olarak kabul edilir, bu yüzden pervaneye bir değer olarak 'true' atamanıza gerek yoktur.

Açıkça doğru olduğu zaman pervane değerini atlayın.

Anahtar dizini olarak dizi dizini kullanmaktan kaçının; bunun yerine benzersiz bir kimlik kullanın: Çok sayıda geliştiricinin bir liste oluştururken bir öğenin dizinini anahtar olarak kullandığını gördük, bu SO iyi değil! Yanlış yazdıkları şey bu…

BU YAPMALIDIR NELER BİR ÖRNEĞİDİR *** DEĞİL *** YAPMAK!

Anahtar, React'in DOM öğelerini tanımlamak için kullandığı tek şeydir. Peki bir öğeyi listeye iterseniz ya da bir şeyleri ortadan kaldırırsanız ne olur? Anahtar öncekiyle aynıysa, React DOM elemanının aynı bileşen grubunu (önceden olduğu gibi) temsil ettiğini varsayar. Ancak bu durum böyle değil!

Bu yüzden benzersiz bir kimlik kullanmalısınız. Her öğe kalıcı ve benzersiz bir özelliğe (ID) sahip olmalıdır. Ve ideal olarak, öğe (ID) oluşturulduğunda öğe atanmalıdır. Yani böyle bir şey yazıyor…

BU NELER ÖRNEĞİDİR *** *** YAPMALIDIR *** YAPMALIDIR!

Gerekli olmayan tüm aksesuarlar için her zaman açık defaultProps tanımlayın. DefaultProps sağlamak, kodunuzun okuyucusunun bazı şeyleri varsayması gerekmediği anlamına gelir; çünkü bileşenleri oluştururken defaultProps'a bakarak, prop için varsayılan değeri bilirler.

Kötü vs İyi örnek re: defaultProps tanımlama.

Gördüğünüz gibi, React kodunuzu gözden geçirme işlemi sırasında nispeten hatasız hale getiren küçük ama çok önemli şeyler var. Bu en iyi uygulamaları öğrenmek ve bunları kullanmak için vaktinizi önceden harcamak, hatalarınızı düzeltmek için kodunuzu yeniden yazmak için daha az zaman harcayacağınız ve sevdiğiniz şeyleri yapmanıza daha fazla zaman ayıracağınız anlamına gelir. Sevdiğiniz şeyleri yapmak kod yazmak anlamına gelirse, farklı bir projeye kod yazmak için daha fazla zamanınız olacak!

PRDXN’in React en iyi uygulamalarının çoğu burada Github'da bulunabilir: https://github.com/prdxn/React-JS-Checklist. Lütfen bu listeyi paylaşmaktan ve katkıda bulunmaktan çekinmeyin. Ve erişim konusunda herhangi bir sorun yaşarsanız, buradaki yorumlarda bizi etkileyin.

PRDXN ile müşteri veya çalışan olarak çalışmak ister misiniz? O zaman bizi vur! İletişim bilgileri de dahil olmak üzere daha fazla ayrıntı için buraya www.prdxn.com adresini ziyaret edin.