React: ReactJS Kullanımına Yönelik Eksiksiz Başlangıç ​​Kılavuzunuz

ReactJS hakkında bir şeyler duydunuz ama nereden başlayacağınızı bilmiyor musunuz? ReactJS ile oynamaya başladınız ama onu günlük hayatınızda nasıl kullanacağınızdan emin değil misiniz? Bu makale, bugün geliştiriciler tarafından kullanılan en popüler kitaplık olan React JavaScript kitaplığını öğrenme ve ustalaşma 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ıkta gereksiz bir yoldan sapmadan 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 etkili 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 hantal hale gelebilir. React ve onun tercih edilen 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 React ile herhangi bir deneyime (veya bilgisine) sahip olmadan müdahale etmesi ve koda katkıda bulunması nispeten kolaydır!

Sizin için önerilenler: React Native Uygulamasının Performansını Optimize Etmek için 5 Değerli İpucu.

Neden ReactJS'yi Kullanmalı?

Her şeyden önce, JavaScript çerçeveleri söz konusu olduğunda önünüzde bir seçeneğiniz var. Peki neden React'i seçmelisiniz? Başlangıç ​​olarak, 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 kalıcı kutu veya gezinme çubuğu oluşturmak için yüzlerce kod satırına ihtiyaç duyabilir. React, her durumda bir değişiklik olduğunda (Angular'da sıklıkla yapıldığı gibi) gerçek DOM öğelerini yazmak ve yeniden yazmak yerine sanal DOM kullandığından, React kullanmak, uygulamalarınızı olduğundan daha hızlı hale getirirken daha az kod satırına izin vererek değerli zaman kazandırabilir. önceki.

Bir Tarayıcıya Yükleme

React'i bir tarayıcıda kullanabilmeniz için önce onu yüklemeniz gerekir. Neyse ki, npm ve Browserify sayesinde bu basit bir işlemdir. Düğüm veya başka bir sunucu tarafı ortamı mı kullanıyorsunuz? Bunun için npm ve Browserify'ı da kullanabilirsiniz. Her şeyi yükledikten sonra, favori metin düzenleyicinizle bir HTML dosyası oluşturun. Aksi takdirde, sizin için tüm bunları zaten kurmuş olan temel bir başlangıç ​​projesi oluşturan Create-React-App gibi bir ortak kalıp oluşturucu kullanın.

App.js'yi ReactJS kullanmak için 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 fazla dosyaya ayıralım. Bir bileşeni ES6'da yazılmaktan JSX'te yazılmaya dönüştürerek başlayacağız. Tüm React bileşenlerimizi tek bir dizinde tutarsak (ki bunu yapmalısınız). Öyleyse boş bir src/components dizini oluşturalım ve App.js'yi buna taşıyalım: mv app/App.js src/components/app-react.js. Ardından app-react.js olarak yeniden adlandırın.

Yalnızca ES6 yerine React'i kullanmak için, strict kullanımını 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 Oluşturmaya Başlayın

React'i kullanmaya başlamanın birçok yolu vardır, ancak favorilerimizden 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 ihtiyacınız olan her şeyle (görüntüler dahil) donatılmıştır.

Kendinizi kodlamak istemiyor musunuz? Sorun değil! Bu kolay adımları izleyerek tüm bileşenlerimizi gerçekten kopyalayabilirsiniz. Bunları projenize kopyaladıktan sonra, amaçlarınıza uyacak şekilde değiştirmeniz yeterlidir! Seçim senin! Buradaki üç başlangıç ​​seçeneğinin tümüne 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ı olduğudur. 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 etmek için tek bir HTML öğesi kullanabilirsiniz. Bu kulağa mantıksız gelebilir; Ne de olsa yıllardır yaptığımız şey bu değil mi?

İlginizi çekebilir: Facebook JavaScript Engine (Hermes) Android'de React Native'i Artırıyor.

JSX Sözdizimine Giriş

JSX, JavaScript veya TypeScript gibi bir programlama dili değil, JavaScript'in bir uzantısı olarak tasarlanmış bir sözdizimidir. Bu nedenle, yeni geliştiricilerin nasıl çalıştığını ve onu nerede kullanabileceğinizi anlamaları önemlidir. JSX kodu, HTML'ye çok benzeyen bir şekilde yazılmıştır ve JSX kodunu, her iki dili de aynı anda öğrenen yeni geliştiriciler için harika bir ilk adım haline getirir. JSX'i neyin benzersiz kıldığı 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 react_tutorial yazarak yeni bir dizin oluşturun. Bu çalışmayı bitirdiğinde, yeni oluşturduğunuz dizine cd react_tutorial yazarak gidin. Ardından terminalinizi açın ve node -v yazarak Node.js'yi başlatın.

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

Statik vs Dinamik vs PureComponent

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 (tepki işaretleme), dinamik AJAX istekleri (tepki verileri) ve mevcut DOM öğelerini yeniden kullanma (tepki-saf) bulunur. Her yöntemin kendine has 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 mevcut olmayan veritabanlarından içerik almanız gerekiyorsa, tepki verilerini kullanmak daha iyi bir seçimdir. Projenize en uygun bileşen oluşturma yöntemine karar verirken, uygulamanızın her bir parçasının ne kadar kararlı ve kalıcı olacağını düşünmek önemlidir.

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

Bileşenlerinizin yaşam döngüsünün farklı bölümlerini kontrol etmek için kullanabileceğiniz birkaç 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. Bunun içinde, localStorage kullanarak bilgi kaydetme gibi bileşeniniz için ihtiyaç duyduğunuz tüm başlatmaları ekleyebilirsiniz. componentDidMount() yöntemi, bir bileşen monte edildikten ve oluşturulduktan hemen sonra da çağrılır. Burada, bir bileşen tamamen başlatıldığında çalışması gereken kodu ekleyebilirsiniz (örneğin, yeni ağ istekleri oluşturma).

Bileşenlerde Durumu İşleme

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

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 isterse, bunu yapmak için diğer bileşene bir referansa (props) 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önetiyorsun?

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

Bir ana bileşenden bir alt bileşene veri aktarmanın iki yolu vardır: props veya durum aracılığıyla. Props 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şlatabilir) iletmek veya alt bileşeninizden çağırmak istediğiniz işlevleri tanımlamak istiyorsanız, durum yoluyla veri iletmek yararlı olabilir. Her iki yaklaşımı da gözden geçirelim ve bunları kodumuzda kullanmanın ne zaman uygun olduğunu görelim!

Şunlar da hoşunuza gidebilir: Headless WordPress'te JS'nin 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, özel gereksinimlerinizle ilgili örnek projeler sunarak ve projeler tasarlayarak uzmanlığını gösterebilmesi önemlidir. Bu, iş hedeflerinizi ve hedeflerinizi kolayca anlamalarına yardımcı olacaktır.

Herhangi bir uzman, herhangi bir çalışmaya başlamadan önce her zaman sorular sorarak başlayacaktır. Bu nedenle, tepki çerçevesi kullanarak bir web sitesi oluştururken uygun zamanlarda soru soran bir uzmanın işe alınması şarttır. ReactJS geliştiricilerinin ortalama işe alma maliyeti saatte 40-100 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 yaparken bunu aklınızda bulundurun.

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