Yeni Gelenlerin Bir Sonraki React Uygulamanıza Yaklaşmaları İçin 5 İpucu – JSManifest

Yeni Gelenlerin Bir Sonraki React Uygulamanıza Yaklaşmaları İçin 5 İpucu – JSManifest

Her yığında el ele giden belirli araçların çok sayıda varyasyonu olduğundan, bugün yeni bir modern ön uç projesi başlatmak oldukça stresli olabilir. Ancak, kullanım durumlarınız için farklı amaçlara hizmet eden belirli araçlarla gitmek pek mantıklı değil, bu yüzden sadece topluluğa yardımcı olmak için yeni gelenler ve/veya eskiler için bazı gizemleri açıklığa kavuşturmak için bu makaleyi oluşturmak istedim 🙂

2020’de Bir Sonraki React Uygulamanızı Bugün Oluşturmak için 5 İpucu:

1. Bir Yapı Aracı düşünün

Bu listede ele almak istediğim ilk şey, yapım adımlarında size yardımcı olacak bir araç seçmek. Gibi paketleyicileri kullanan derleme araçları olarak bilinirler. web paketi. Başlamanıza yardımcı olacak, seçebileceğiniz bazı önerilen seçenekler şunlardır:

oluştur-tepki-uygulaması

React’te kod yazmaya yeni başlamak istiyorsanız, muhtemelen bu benim en iyi tavsiyem olacaktır. hemen Projenin nasıl inşa edildiği konusunda endişelenmenize gerek kalmadan. Bu nedenle, üretimde uygulamaları çalıştırmak için kolayca kullanılmak zorunda değildir – ancak bunu bir başlangıç ​​noktası olarak seçebilir ve ne yaptığınızı biliyorsanız projeyi üretime hazır olacak şekilde yapılandırabilirsiniz. Geliştiricilerin bunu create-react-app bugün.

Size bazı hızlı fikirler vermek için bazı örnek kullanım durumları:

GatsbyJS

Gatsby geliştiricilerin son derece hızlı web siteleri ve uygulamalar oluşturmasına yardımcı olan, React tabanlı ücretsiz ve açık kaynaklı bir çerçevedir.

Statik bir site oluşturucu görevi görür, yani tüm sayfalarınız çalışma zamanı yerine derleme zamanında hazırlanır. Ancak, bu dinamik sayfalar için kullanılamayacağı anlamına gelmez. Gatsby’nin gücü, statik sayfalar ve birinci sınıf SEO için anında sayfa yüklemelerine ihtiyacınız varsa, bloglar, e-ticaret ve açılış sayfaları gibi kullanım durumları için gerçekten parlıyor.

Bunun anlamı, eğer bir web sitesi kuruyorsanız, içerik sık sık değişmezmuhtemelen bir sonraki projenizi Gatsby ile başlatmaktan en çok siz yararlanacaksınız.

Fakat Bile içeriğin olduğu bir site oluşturuyorsanız yapmak sık sık değiştir, hala iyi bir seçim olabilir! Anında dinamik istemci tarafı yolları oluşturabileceğiniz bir hibrit uygulama oluşturmayı destekler. Karma bir uygulama oluşturmak için oluşturma süresini istemci çalışma zamanı verileriyle birlikte kullanabilirsiniz.

hakkında daha fazla bilgi edinin derlemeyi burada istemci çalışma zamanı verileriyle birleştirmek.

Bunların yüzlerce olduğunu da belirtmek isterim. başlangıçlar ve eklentiler projelerinizde rahatlıkla kullanabilmeniz büyük bir artı.

İşte Gatsby ile oluşturulmuş bazı örnek yapım web siteleri:

SonrakiJS

kullanan uygulamalar SonrakiJS sunucu tarafında (SSR) ve istemci tarafında işlenir. Kullanıcı kimlik doğrulaması gibi sunucu mantığını kullanmayı planlıyorsanız, bir sonraki web uygulamanızı oluşturmak için bu araçla birlikte gitmeniz muhtemelen daha fazla önerilir. (GatsbyJS’nin kullanıcı kimlik doğrulamasını da halledebileceğini unutmayın, ancak muhtemelen bunu daha fazla müşteri tarafı kodunuzla halletmeniz gerekecek).

Sağladığı benzersiz kavramlardan bazıları, bir klasördeki her dosyanın gerçek bir sunucu veya istemci tarafı rotası olabileceği dosya sistemi yönlendirmesidir – hepsi sizin kontrolünüzde. GatsbyJS, rotalarını belirlemek için benzer bir dosya sistemi yaklaşımı kullanır. kaynak/sayfalar dizin, ancak oradaki sunucu mantığını işlemeye gerçekten girmez.

İşte NextJS ile oluşturulmuş bazı örnek üretim web siteleri:

toplama

Bunun yerine bir tepki kitaplığı oluşturmak istiyorsanız, o zaman toplama gitmenin yoludur.

2. Yardımcı Program Kitaplıklarını Düşünün

Her şeyden önce belli ki sen yapmıyorsun zorunda bir sonraki tepki uygulamanızı oluşturmanıza yardımcı olacak bir yardımcı program kitaplığına sahip olun, ancak projenizde genel kullanım için kendi uygulamanızı yazmadan kolayca kullanabileceğiniz bazı yardımcı programlara sahip olmak kesinlikle iyi hissettiriyor.

İşte kullanabileceğiniz bazı seçenekler:

Lodaş

Lodaş npm’nin en popüler ve indirilen paketidir ve diziler, dizeler, nesneler ve bağımsız değişken nesneleri için tutarlı ortamlar arası yineleme desteği sağlamak üzere oluşturulmuştur. Hemen hemen her yerde genel amaçlı araç takımları olarak tutmak için mükemmeldir. hiç proje.

Aklınıza gelebilecek herhangi bir durumda yardımcı olmak için mümkün olan her işleve sahiptir. Tamamen işlevsel bir yaklaşım sağlar ve aşağıdakiler gibi birçok yararlı işleve sahiptir: .zip, .orderBy, .sample, .shuffle, .debate, .partialRight, .differencevb.

Hatta bazı yerel döngü fonksiyonlarını şöyle sarar: .her biri için ve .haritaonları normal bir işlev şeklinde sağlar.

RambdaJS

Lodash gibi, rambda da özellikle işlevsel bir programlama stili için tasarlanmış işlevsel bir yardımcı program kitaplığıdır. Kullanıcı verilerini hiçbir zaman gerçekten değiştirmeyen işlevsel işlem hatları oluşturmayı kolaylaştırmayı amaçlar.

Şahsen henüz kullanmadım ama belgelerinden sağladıkları yardımcı programları değerlendiriyorum. çok kullanışlı.

MathJS

Bir sonraki projenizde çok fazla matematik kullanmayı planlıyorsanız, kullanabilirsiniz. MathJS bu sizin için hayatı kolaylaştırmaya yardımcı olabilir.

date-fns (veya MomentJS)

Hemen hemen her web uygulamasının, uygulamalarında bir yerde bir tür tarih göstermesi gerekir.

Tek yapmanız gereken onları görüntülemekse, tarihlerle çalışmak oldukça kolay olabilir. Ancak tarihleri ​​değiştirmek gibi daha fazla kullanım örneğine ihtiyacınız varsa, çok stresli ve tarihleri ​​yoğun bir şekilde kullanmayı planlıyorsanız, tarihleri ​​kendiniz işlememelisiniz.

Tarihlere yardımcı olacak popüler bir olgun yardımcı program kitaplığı an yıllardır savaşta test edilmiştir.

Kütüphane oldukça büyük olabilir ve bu nedenle şimdi kullanmanızı tavsiye ederim. tarih-fns bu, neredeyse aynı yardımcı programları sağlayan ancak daha modüler bir yaklaşımı destekleyen ve daha küçük bir paket boyutuyla sonuçlanan daha yeni bir kitaplıktır.

3. Bir CSS Çerçevesi Düşünün

Özellikle CSS’de sıfır deneyimi varsa, herkesin kendi şık bileşenlerini yaratma zamanı yoktur. Bu nedenle, bu listeyi, kendi bileşenlerini oluşturmak için bir başlangıç ​​noktası olarak genişletmelerine yardımcı olmak için olgun CSS çerçevelerini kullanmak isteyenlere yardımcı olmak için sağladım.

tarz bileşenleri

kullanırım tarz bileşenler hemen her projede. Eğlenceli, hızlı, yardımcı ve hayatımı çok kolaylaştırıyor.

Bileşenlerinizi biçimlendirmek için gerçek CSS kodu yazmak için etiketli şablon değişmezlerini ve CSS’nin yeteneklerini kullanır. Ayrıca stilleri tepki veren bileşenlerinizden ayırarak bileşenlerinizi ayrı ayrı oluşturmanızı çok daha kolay hale getirir.

anlamsal-ui-tepki

anlamsal-ui-tepki kullanıcı arabirimleri oluşturmanıza yardımcı olacak küçük modüllerin yanı sıra tepki bileşenleri sağlayan popüler bir kitaplıktır. API’leri iyi tasarlanmış ve belgeleri iyi belgelenmiştir.

Semantik-ui-tepkiyi sık sık tarz bileşenleriyle birlikte kullanırım.

Malzeme-ui

Malzeme-ui Google materyal tasarımını taklit eden bir başka popüler kütüphanedir. Reaksiyon bileşenleri ve küçük modüller de sağlar. Semantik-ui-tepki gibi, API’leri de iyi tasarlanmış ve belgeleri de iyi belgelenmiştir.

İşimde malzeme-ui kullanıyorum ve bunu seviyorum.

Karınca Tasarımı

karınca tasarımı tepki bileşenleri oluşturmaya yardımcı olmak için popüler bir seçimdir.

Taslak

Taslak Masaüstü görünümüne odaklanan karmaşık ve veri yoğun arabirimler oluşturmak için özellikle uygun bileşenler sunar. Bileşen kitaplığından, simgeler oluşturmak ve görüntülemek, tarih ve saatlerle etkileşim kurmak, saat dilimlerini seçmek ve daha fazlası için kod bitleri alabilirsiniz.

React-bootstrap

içindeki her bileşen tepki-önyükleme kolayca erişilebilir olacak şekilde yapılmıştır – ön uç çerçeve oluşturma için önemlidir.

React-toolbox

Malzeme-ui gibi, tepki-araç kutusu Arayüzlerinizin görünümünü ve hissini kolaylaştırmak için tepki bileşenleri sağladığından, Google’ın malzeme tasarım ilkelerini projenizde uygulamak için kullanabileceğiniz başka bir kütüphanedir.

rondela

rondela Netflix gibi büyük şirketler tarafından kullanılıyor. Bu başka bir tepki bileşeni kitaplığıdır ve arabiriminizi oluşturmanıza yardımcı olacak birçok bileşen çeşidi sağlar.

güzel

güzel Toggle, ComboBox, Rating, TextInput, Button, Card, Select vb. gibi bir dizi React bileşeni sağlar. Bileşenleri mobil ve masaüstü cihazlarda çalışacak şekilde optimize edilmiştir. Geliştiricilerin bileşenlerini gereksinimlerine göre özelleştirmelerine olanak tanıyan son derece özelleştirilebilir bir API sağlarlar.

React-MD

tepki-md‘in amacı, tepki bileşenlerinden oluşan bir kitaplık sağlayarak geliştiricilerin tamamen erişilebilir malzeme tasarımı stilinde web siteleri oluşturmalarına yardımcı olmaktır.

4. React Topluluklarının Etrafında Olmayı Düşünün

Tepki topluluklarının bağlantılarını (yer imi ekleme gibi) kaydetmek ve önemli güncellemeleri kaçırmamak için sık sık kontrol etmek inanılmaz derecede önemlidir.

Tepki ekosistemi çok aktiftir ve kısa bir süre MIA’daysanız (örneğin bir ay gibi) çok şey kaçırabilirsiniz.

Kendilerini serbest bıraktıklarında tepki kancaları özelliği, insanlar zaten bir hafta içinde üretim kodlarına uygulamaya başlıyorlardı. gibi kütüphaneler tepki-kullanım hızla ortaya çıktı ve tonlarca insan, bunların birleştirilebilirlik ve daha az kod gibi sınıf bileşenleri üzerindeki faydalarını hızla fark etti.

Ayrıca, deneyimlerime göre, beynimize her gün sabit bir hızla yeni bilgileri tüketmek, bir ay sonra geri gelip, hala sınıfınız üzerinde stres yaşarken tartışılan ezici miktarda bilgiyi tüketmekten çok daha kolay. kancalar sorununuzu kolayca çözebilecekken bileşenler.

İşte yakın temas halinde kalabileceğiniz bazı tepki toplulukları:

dev.to

dev.to geliştiricilerin takılmayı sevdiği tepki veren popüler bir topluluktur. İnsanların bir araya gelip birlikte mutlu olabileceği toksik olmayan bir ortamı desteklerler. Katılmak için gittiğim topluluk.

Orta

Orta geliştiricilerin uzmanlıklarını ve deneyimlerini yazıp paylaştığı başka bir tavsiye topluluğudur. Özellikle bir React geliştiricisiyseniz, bilgi almak için çok sayıda kaliteli makale var.

karma düğüm

karma düğüm dünyanın dört bir yanından diğer akıllı geliştiricilerle bağlantı kurmanın en kolay yoludur ve onların katılımıyla kariyerlerini geliştirmelerine yardımcı olmayı amaçlar.

Reddit/r/reactjs

bu Reactjs subreddit tepki topluluğundaki bazı popüler geliştiricilerin takıldığı yerdir. Ancak, güzel yorumlar arıyorsanız buraya gelmenizi tavsiye etmem. Toksisiteye duyarlıysanız uzak durun ve dev.to yerine.

5. Sıkıcı Olmayan Bir Kahve Dükkanına Gidin

Bulunduğum bir ortamda tepki vererek kod geliştirmeyi seviyorum. sıkılma. noktalara gitmem bazı starbucks, bazı kahve çekirdeği yerleri ve bölgedeki bazı yerel kahve dükkanları.

Ölmediği (ama çok dolu olmadığı) bir kafedeyken daha fazla iş yaptığımı fark ettim. çok gürültülü değilçalışanların birbirleriyle konuşmayı sevdiği yerlerde (bazen arka planda sevimli komik konuşmalar dinlemek havayı aydınlatır), vb.

Kod yazarken zamanımın tadını çıkarırken, daha iyi kalitede yazıyorum çünkü aslında iyi kod yazarken zamanın geçmesinden zevk alıyorum.

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.