React: ReactJS'yi Kullanmak İçin Eksiksiz Başlangıç ​​Kılavuzunuz

ReactJS hakkında bir şeyler duyuyorsunuz ancak nereden başlayacağınızı bilmiyor musunuz? ReactJS ile oynamaya başladınız, ancak onu günlük hayatınızda nasıl kullanacağınızdan emin değil misiniz? Bu makale, günümüzde geliştiriciler tarafından kullanılan en popüler kitaplık olan React JavaScript kitaplığını öğrenme ve bu kitaplıkta uzmanlaşma konusunda rehberiniz olacaktır. Size ReactJS'ye tam olarak nasıl başlayacağınızı ve onu iş akışınıza nasıl entegre edeceğinizi göstereceğim, böylece başka bir çerçeve veya kitaplıktan gereksiz yere sapmak zorunda kalmadan daha dinamik kullanıcı arayüzleri oluşturabilirsiniz. Başlayalım!

ReactJS nedir?

React, sizi yeniden kullanılabilir bileşenler oluşturmaya teşvik eden bir ön uç geliştirme kitaplığıdır. Kullanıcı arayüzleri oluşturmanın verimli bir yolunu arıyorsanız, React tam ihtiyacınız olan şey olabilir. Vanilla JavaScript veya jQuery ile kullanıcı arayüzleri oluştururken, kodunuz çok hızlı bir şekilde çok karmaşık ve kullanışsız hale gelebilir. React'i ve onun tercih ettiği bileşen tabanlı geliştirme yöntemini kullanarak, kodunuzun yeniden kullanımı ve bakımı çok daha kolay olacaktır.

Aslında, birkaç bileşen oluşturduktan sonra, ekibinizdeki diğer geliştiricilerin herhangi bir React deneyimi (veya bilgisi) olmadan devreye girmesi ve koda katkıda bulunması nispeten kolaydır!

Size önerilir: React Native Uygulamasının Performansını Optimize Etmek İçin 5 Değerli İpucu.

Neden ReactJS Kullanmalı?

Her şeyden önce, JavaScript çerçeveleri söz konusu olduğunda önünüzde bir seçenek var. Peki, neden React'i seçtiniz? Yeni başlayanlar için, geliştiricilerin son kullanıcıların anlaması ve etkileşim kurması kolay büyük uygulamalar oluşturmasına yardımcı olmak söz konusu olduğunda.

Şimdiye kadar yalnızca jQuery veya Vanilla JavaScript ile çalışan geliştiriciler için, yeni teknolojilerle nasıl çalışılacağını öğrenmek sinir bozucu olabilir. Bazı durumlarda, geliştiriciler yalnızca basit bir modal kutu veya gezinme çubuğu oluşturmak için yüzlerce kod satırına ihtiyaç duyabilir. React, durumdaki her değişiklik olduğunda (genellikle Angular'da yapıldığı gibi) gerçek DOM öğelerini yazmak ve yeniden yazmak yerine sanal DOM kullandığından, React'i kullanmak, daha az kod satırına izin vererek ve aynı zamanda uygulamalarınızı eskisinden daha hızlı hale getirerek değerli zamandan tasarruf sağlayabilir. önce.

Bir Tarayıcıya Yükleme

React'i bir tarayıcıda kullanabilmeniz için onu yüklemeniz gerekir. Şans eseri, npm ve Browserify sayesinde basit bir işlem. Düğüm veya başka bir sunucu tarafı ortamı mı kullanıyorsunuz? Bunun için de npm ve Browserify kullanabilirsiniz. Her şeyi yükledikten sonra, favori metin düzenleyicinizle bir HTML dosyası oluşturun. Aksi takdirde, Create-React-App gibi sizin için temel bir başlangıç ​​projesi oluşturan ve tüm bu unsurların önceden ayarlanmış olduğu bir standart oluşturucu kullanın.

App.js'yi ReactJS kullanacak şekilde dönüştürme

Kodumuzun tamamı şu anda App.js adlı tek bir dosyada. Ama bu test etmeyi zorlaştırıyor. Öyleyse, onu birden çok dosyaya ayıralım. ES6'da yazılan bir bileşeni JSX'te yazılana dönüştürerek başlayacağız. Tüm React bileşenlerimizi tek bir dizinde tutmamız en kolayıdır (bunu yapmanız gerekir). Öyleyse, boş bir src/components dizini oluşturalım ve App.js'yi bu dizine taşıyalım: mv app/App.js src/components/app-react.js. Sonra onu app-react.js olarak yeniden adlandırın.

Yalnızca ES6 yerine React'i kullanmak için, use solid'i değiştirin; babel kullanmak için dosyanızın en üstünde; Ayrıca Babel'i npm install –save babel-CLI babel-preset-es2015 babel-preset-react aracılığıyla kurmanız gerekecek, bu da Babel'in yeni JSX sözdiziminizi derlemesini sağlayacaktır.

Örnek Uygulamamızla Derlemeye Başlayın

React'i kullanmaya başlamanın pek çok yolu var, ancak en sevdiğimiz şeylerden biri, basit bir Yapılacaklar Listesi uygulaması oluşturmaktır. Hızlı hareket etmenizi sağlamak ve birçok yaygın hatadan kaçınmak için tek yapmanız gereken arka uç kodunuzu ve ön uç bileşenlerinizi değiştirmek olan örnek bir uygulama oluşturduk. Çalıştığı kadar iyi göründüğünden emin olmak için resimler de dahil olmak üzere ihtiyacınız olan her şeyle donatılmış olarak gelir.

Kendinizi kodlamak istemiyor musunuz? Sorun değil! Bu kolay adımları izleyerek aslında tüm bileşenlerimizi kopyalayabilirsiniz. Bunları projenize kopyaladıktan sonra, amaçlarınıza uyacak şekilde değiştirin! Seçim senin! Üç başlangıç ​​seçeneğinin tümüne buradan göz atın.

Bileşenleri Kullanan Temel Örnek

Herhangi bir web uygulamasına bakarsanız, fark edeceğiniz ilk şeylerden biri, her bir öğenin ayrı olmasıdır. Tipik bir sayfada farklı üstbilgiler, altbilgiler, logolar ve düğmeler bulunur. Ancak, React.js ile çalışırken sayfanızdaki her bileşen için birden çok HTML öğesi kullanmak yerine, hepsini temsil edecek tek bir HTML öğesi kullanabilirsiniz. Bu kulağa mantıksız gelebilir; Ne de olsa yıllardır yaptığımız bu değil mi?

Şunlar hoşunuza gidebilir: Facebook JavaScript Motoru (Hermes) Android'de React Native'i Artırır.

JSX Söz Dizimine Giriş

JSX, JavaScript veya TypeScript gibi bir programlama dili değil, JavaScript'in bir uzantısı olarak tasarlanmış bir söz dizimidir. Bu nedenle, yeni geliştiricilerin nasıl çalıştığını ve onu nerede kullanabileceğinizi anlaması önemlidir. JSX kodu, HTML'ye çok benzeyen bir şekilde yazılmıştır, bu da JSX kodunu her iki dili aynı anda öğrenen yeni geliştiriciler için harika bir ilk adım haline getirir. JSX'i neyin benzersiz yaptığı ve nasıl kolayca ustalaşabileceğiniz hakkında daha fazla bilgi için ReactJS eğitimimizin tamamını okuyun!

İlk React projenizi oluşturmaya başlamak için terminalinizin içine mkdir tepki_tutorial yazarak yeni bir dizin oluşturun. Çalışmayı bitirdiğinde, cd tepki_tutorial yazarak yeni oluşturduğunuz dizine gidin. Ardından terminalinizi açın ve node -v yazarak Node.js'yi başlatın.

Düğümü başarıyla yüklediyseniz, Düğümün yanında listelenen v10.x'i görmelisiniz. Değilse, macOS veya Linux kullanıyorsanız nvm install 10'u kullanmayı deneyin. Bu da işe yaramazsa, Google orada neyin yanlış gittiğini anlamaya yardımcı olabilmelidir! Düğüm 10+ sürümüyle düzgün bir şekilde kurulduğunda, projemizi sıfırdan oluşturmaya devam etmeye hazırız!

Statik, Dinamik ve PureComponent karşılaştırması

Modern JavaScript ile web uygulamaları oluştururken, UI bileşenleri oluşturmak için üç ana seçeneğiniz vardır. Bunlar arasında statik HTML (react-markup), dinamik AJAX istekleri (react-data) ve mevcut DOM öğelerinin yeniden kullanılması (react-pure) yer alır. Her yöntemin kendine göre avantajları vardır ve özel kullanım durumunuza bağlı olarak farklı şekilde uygulanabilir.

Örneğin, belirli öğelerin her zaman kullanılabilir olacağını biliyorsanız, bunları statik HTML etiketlerine yerleştirebilirsiniz. Ancak, henüz var olmayan veritabanlarından içerik almanız gerekiyorsa, tepki verisini kullanmak daha iyi bir seçimdir. Hangi bileşen oluşturma yönteminin projenize en uygun olduğuna karar verirken, uygulamanızın her bir bölümünün ne kadar kararlı ve kalıcı olacağını düşünmeniz önemlidir.

ReactJS Bileşenlerinde Yaşam Döngüsü Yöntemleri

Yaşam döngülerinin farklı bölümlerini kontrol etmek için bileşenlerinizde kullanabileceğiniz bir avuç yaşam döngüsü yöntemi vardır. componentWillMount() yöntemi, bir bileşen ilk kez işlenmeden hemen önce çağrılır. İçinde, localStorage kullanarak bilgi kaydetme gibi bileşeniniz için ihtiyaç duyduğunuz başlatmaları ekleyebilirsiniz. componentDidMount() yöntemi, bir bileşen monte edildikten ve işlendikten hemen sonra da çağrılır. Burada, bir bileşen tamamen başlatıldıktan sonra çalışması gereken kodu ekleyebilirsiniz (örneğin, yeni ağ istekleri oluşturmak).

Bileşenlerde İşlem Durumu

Reacts'in durum yönetimine yaklaşma şekli biraz benzersizdir. Neden anlamak için önce çoğu çerçevenin durumları nasıl ele aldığını düşünmemiz gerekir.

Geleneksel olarak bir geliştirici, bir bileşenin durumunu kendi içinde depolanmış olarak düşünürdü. Bu birçok soruna yol açar. Bir bileşen başka bir bileşenin durumunu güncellemek istiyorsa, bunu yapmak için diğer bileşene bir referansa (destek) ihtiyacı vardır. Durum nesnelerinizin veya dizilerinizin bileşenler arasında senkronize kalmasını istiyorsanız, tüm bileşenlerin erişebileceği bir tür merkezi veri deposuna veya olay yayıcıya ihtiyacınız vardır.

Yalnızca iki veya üç farklı duruma sahip küçük bir uygulamadaki bileşenler için yeterince basit olsa da, uygulamanızın düzinelerce farklı durumu olduğunda ne olur? Hepsini nasıl yönetiyorsunuz?

Üst Bileşenden Alt Bileşene Veri Geçirme

Bir üst bileşenden bir alt bileşene veri aktarmanın iki yolu vardır: aksesuarlar veya durum aracılığıyla. Prop'lar aracılığıyla veri iletmek, bir dizide kaç öğe olduğunu tanımlamak gibi bileşenleriniz için değişkenleri tanımlamak için yararlı olabilir. Öte yandan, büyük nesneleri (uygulamanızı potansiyel olarak yavaşlatabilecek) aktarmak veya alt bileşeninizden çağırmak istediğiniz işlevleri tanımlamak istiyorsanız, durum yoluyla veri aktarmak yararlı olabilir. Her iki yaklaşımı da gözden geçirelim ve bunları kodumuzda ne zaman kullanmanın uygun olduğunu görelim!

Şunlar da ilginizi çekebilir: React JS'nin Başsız WordPress'te Sunduğu İyileştirmeler Nelerdir?

Çözüm

Bir ReactJS Geliştiricisi tuttuğunuzda JavaScript, CSS, HTML ve Node.js ile 5 yıldan fazla çalışma konusunda deneyimli bir serbest çalışan seçtiğinizden emin olun. Geliştiricinizin, örnek projeler sunarak ve özel gereksinimlerinize uygun projeler tasarlayarak uzmanlıklarını gösterebilmesi önemlidir. Bu, iş hedeflerinizi ve hedeflerinizi kolayca anlamalarına yardımcı olacaktır.

Herhangi bir uzman, herhangi bir işe başlamadan önce her zaman sorular sorarak işe başlar. Bu nedenle, reaksiyon çerçevesini kullanarak bir web sitesi oluştururken uygun zamanlarda soru soran bir uzmanla çalışmak şarttır. ReactJS geliştiricilerinin ortalama işe alma maliyeti saatte 40-100 ABD Doları arasında olacaktır. Ancak uzmanlar normalden daha yüksek ücret alıyor. Bu nedenle, ReactJS geliştirme çerçevesini kullanarak bir web sitesi kurmak için bütçe hazırlarken bunu aklınızda bulundurun.

 Bu makale Tagline Infotech LLP'den Rahul Kalsariya tarafından yazılmıştır.