React'te Basit Bir Sayaç Uygulaması Nasıl Oluşturulur

React, en popüler ön uç JavaScript kitaplıklarından biridir. Birçok şirket, kullanıcı arayüzlerini geliştirmek için React'i kullanıyor ve geliştiriciler arasında geniş bir popülerlik kazandı.

Bu temel sayaç uygulaması gibi, React ile basit bir program oluşturmak kolaydır. Basit bir öğretici ile başlamak, React'in bazı temel ancak önemli kavramlarını kavramanıza yardımcı olacaktır.

Sayaç Uygulamasının Özellikleri

Bu projede aşağıdaki özelliklere sahip bir sayaç uygulaması geliştireceksiniz:

1. Sayımı Arttır Düğmesi: Bu, sayımı bir artırır.
2. Sayımı Azalt Düğmesi: Bu, sayımı bir azaltır.
3. Yeniden başlatma tuşu: Bu, sayımı sıfıra ayarlar.

React'in Temel Kavramları

Devam etmeden önce, bu projede kullanacağınız React'teki bu temel kavramlardan bazılarını anlamanız gerekir:

1. Bileşenler: Bileşenler, React uygulamalarının temel yapı taşlarıdır. Bağımsız, yeniden kullanılabilir kod içerirler. Bileşenleri kullanarak, kullanıcı arayüzünü ayrı parçalara bölebilirsiniz. Daha sonra bu parçaları yeniden kullanabilir ve onlarla bağımsız olarak çalışabilirsiniz.
   instagram viewer
2. Durum: React'te, bir bileşenin durumunu temsil eden verileri depolamak için bir nesne kullanabilirsiniz. Bu, bileşenlerin kendi verilerini yönetmesine ve güncellemesine olanak tanır. Bir bileşenin durumu, nasıl işlendiğini ve davrandığını belirler.
3. Fonksiyonel Bileşenler: React'in İşlevsel bileşeni, basitçe, prop'ları bağımsız değişken olarak kabul eden ve bir React öğesi (JSX) döndüren bir JavaScript işlevidir.
4. Sahne: Bir üst bileşenden bir alt bileşene veri aktarmak için props ("özellikler"in kısaltması) kullanabilirsiniz. Aksesuarlar, React'in ayrılmaz parçalarından biridir ve şunları yapabilirsiniz: React'te birkaç işlem gerçekleştirmek için prop'ları kullanın.
5. Kancalar: Tepki Kancaları yerleşik işlevlerdir işlevsel bileşenler içindeki yaşam döngüsü yöntemleri gibi durumu ve diğer React özelliklerini yönetmenize izin verir. Kısa ve net kod yazmanıza da yardımcı olabilirler. ile durumu nasıl yönetebileceğinizi yakında göreceksiniz. kullanımDevlet() kanca.

Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.

1. Adım: Projeyi Kurmak

Terminalinizi açın ve başlamak için aşağıdaki komutu çalıştırın:

npx yaratmak-tepki-uygulaması tepki-karşı-uygulaması

Bu irade yeni bir tepki uygulaması oluştur, projenizi oluşturmaya başlamanız için hazır. Birkaç dosya ve klasör içeren bir dosya sistemi yapısı oluşturacaktır.

Geliştirme sunucusunu başlatmak için terminalde aşağıdaki komutu çalıştırın:

npm başlangıç

Bu komut tarayıcınızda yeni bir sekme açmalıdır. http://localhost: 3000. Projede yapacağınız tüm değişiklikler burada otomatik olarak güncellenecektir.

Adım 2: Sayaç Uygulamasının İskeletini Oluşturma

Aç kaynak/Uygulama.js orada bulunan tüm varsayılan kodu dosyalayın ve silin. Şimdi, aşağıdaki kodu kullanarak uygulamanın bir iskeletini oluşturun:

içe aktarmak Tepki, { useState } itibaren"tepki";
işlevUygulama() {
sabit [sayım, setCount] = kullanımDevlet(0);
izin vermek artışSayısı = () => {
// daha sonra eklemek için
 };
izin vermek azalmaSayısı = () => {
// daha sonra eklemek için
 };
izin vermek Sıfırlama Sayısı = () => {
// daha sonra eklemek için
 }
geri dönmek (
<divsınıf adı="uygulama">
<P>Sayı: {sayım}P>
<divsınıf adı="düğmeler">
div>
div>
);
}
ihracatvarsayılan Uygulama;

İlk ifade şunu içe aktarır: kullanımDevlet gelen kanca tepki modül. oluşturmak için kullanın. saymak durumu ve 0 olarak başlatın. değerini değiştirebilirsiniz. saymak kullanmak setCount işlev.

kullanacaksın artışSayısı, azalmaSayısı, Ve sayımı sıfırla daha sonra sayacın değerini artırmak, azaltmak ve sıfırlamak için çalışır.

İşaretlemede count değişkeninin etrafında süslü parantezlerin { } kullanıldığını fark edebilirsiniz. Bu, esas olarak JSX ayrıştırıcısının, bu ayraçların içindeki içeriği JavaScript olarak ele alması gerektiğini bilmesini sağlar.

Adım 3: Sayaç Uygulamasına İşlevsellik Ekleme

Sayaç uygulamasının işlevselliğini uygulamak için üç düğme oluşturmanız gerekir: sayımı azaltma düğmesi, sayımı artırma düğmesi ve sıfırlama düğmesi. İçine aşağıdaki kodu ekleyin düğmeler bölüm:

<Düğmebaşlık={"Azaltma"} aksiyon={decrementCount} />
<Düğmebaşlık={"artış"} aksiyon={incrementCount} />
<Düğmebaşlık={"Sıfırla"} aksiyon={sıfırlama Sayısı} />

Bu butonlara tıkladığınızda, azalmaSayısı, artışSayısı, Ve sayımı sıfırla fonksiyonlar çalışacaktır. geçtiğinize dikkat edin başlık Ve aksiyon ebeveynden gelen destekler Uygulama çocuğa bileşen Düğme bileşen.

Bu işlevleri şurada güncelleyin: Uygulama.js aşağıdaki kod ile dosya:

izin vermek artışSayısı = () => {
 setCount (sayı + 1);
};
izin vermek azalmaSayısı = () => {
 setCount (sayım - 1);
};
izin vermek Sıfırlama Sayısı = () => {
 setCount (0);
}

bu setCount işlevi durumunu güncelleyecektir saymak.

Düğme bileşenini henüz oluşturmadığınızı unutmayın. Yeni bir tane oluştur bileşenler içindeki klasör kaynak dizini ve ardından adlı yeni bir dosya oluşturun. button.js. Tüm bileşenleri aynı klasörde tutmak iyi bir uygulamadır.

içine aşağıdaki kodu ekleyin bileşenler/Button.js dosya:

içe aktarmak Tepki itibaren"tepki";
işlevDüğme(sahne) {
izin vermek { eylem, başlık } = aksesuarlar;
geri dönmek<düğmetıklamada={aksiyon}>{başlık}düğme>;
}
ihracatvarsayılan Düğme;

bu Düğme bileşen, props yoluyla veri alır. İşlev daha sonra, döndürdüğü biçimlendirmeyi doldurmak için bunları kullanarak bu destekleri ayrı değişkenlere ayırır.

Kod, artırma, azaltma ve sıfırlama düğmelerini oluşturmak için bu bileşeni üç kez yeniden kullanır.

Son olarak, en üstteki Button bileşenini içe aktarın. Uygulama.js aşağıdaki kodu kullanarak sayfa:

içe aktarmak Düğme itibaren"./bileşenler/Botton";

Bu, son kodun ekranda nasıl görüneceğidir. Uygulama.js dosya:

içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak Düğme itibaren"./bileşenler/Düğme";
işlevUygulama() {
sabit [sayım, setCount] = kullanımDevlet(0);
izin vermek artışSayısı = () => {
 setCount (sayı + 1);
 };
izin vermek azalmaSayısı = () => {
 setCount (sayım - 1);
 };
izin vermek Sıfırlama Sayısı = () => {
 setCount (0);
 }
geri dönmek (
<divsınıf adı="uygulama">
<P>Sayı: {sayım}P>
<divsınıf adı="düğmeler">
<Düğmebaşlık={"Azaltma"} aksiyon={decrementCount} />
<Düğmebaşlık={"artış"} aksiyon={incrementCount} />
<Düğmebaşlık={"Sıfırla"} aksiyon={sıfırlama Sayısı} />
div>
div>
 );
}
ihracatvarsayılan Uygulama;

En İyi Tepki Uygulamalarını Takip Edin

React kodunu farklı şekillerde yazabilirsiniz, ancak onu olabildiğince temiz bir şekilde yapılandırmak önemlidir. Bu, onu kolayca koruyabilmenizi sağlar ve uygulamanızın genel performansını artırmanıza yardımcı olabilir.

Tekrarlayan kodlardan kaçınmak gibi React topluluğu tarafından önerilen birkaç React uygulamasını takip edebilirsiniz. her bir React bileşeni için testler yazmak, aksesuarlar için nesne yok etmeyi kullanmak ve aşağıdaki adlandırma sözleşmeler.