Kronometreye tepki ver

Bu hafta, tepkili bir kronometre oluşturarak kancaları kullanmanın temellerine geri döndüm. Bence bu sadece birkaç saat içinde çözülebilecek güzel bir proje ve React kancalarını uygulamak için iyi bir yol. Bu kronometre ile zamanı başlatabilir, zamanı durdurabilir ve sıfırlayabilirsiniz. Hadi başlayalım ve koda bakalım.

Src klasöründeki App.css, App.js ve index.js dışındaki tüm dosyaları kaldıracağız ve tüm içe aktarmaları kaldıracağız. Durum ve etki kancalarını kullanacağız. İlk bileşenimiz böyle görünecek.

Harika, şimdi zamanımızı göstermeliyiz. Milisaniyeleri görüntüleyerek başlayacağız. Kullanım Etkimizi oluşturarak başlayalım. İlk önce aralığımız tanımlanacak ve başlangıç ​​doğruysa zamanlayıcı başlayacak, aksi takdirde aralığı temizleyeceğiz. UseEffect'in ikinci argümanında start ile bir dizi geçireceğiz. Bu, başlangıç ​​durumu değiştiğinde etkimizin çalışacağı anlamına gelir. Ayrıca temizleme için bir dönüş ifadesi de ekleyeceğiz. Son olarak, tıklandığında zamanı başlatacak bir düğmemiz olacak. Bu neye benzeyecek.

Şimdi zamanımız artmaya başlayacak. Şu an itibariyle kronometreyi durdurmanın veya sıfırlamanın bir yolu yoktur. Numaranın doğru görünmesi için görüntülenenleri de biçimlendirmemiz gerekir. Bunu yapmanın güzel bir numarası var. İlk önce zamanı 10'a böleceğiz çünkü bu bir milisaniyenin değeri ve ardından modulo 1000. Şimdi bunu bir sıfıra ekleyeceğiz, böylece zaman başladığında sadece bir rakam yerine zaten bir sıfır olacak. Son olarak, sayı iki basamak olduğunda sıfır kaldırılacak şekilde -2 parametresini dilimleyip geçireceğiz. Bu neye benzeyecek.

Şimdi görüntülenen sayı daha anlamlı olacaktır. Son olarak yapmamız gereken, saniyeleri, dakikaları göstermek ve durdur ve sıfırla düğmelerini oluşturmak. Dakikaları ve saniyeleri yaratmak, milisaniyelerle yaptığımıza gerçekten benziyor. Kopyalayıp yapıştırabilir ve bazı değişiklikler yapabiliriz. Modülü 1000'e kadar kullanmak yerine 60'a kadar yapacağız. Yapmamız gereken başka bir şey, sayıları aşağı yuvarlamaktır çünkü olduğu gibi bırakırsak ondalık sayılar görüntülenecektir. Düğmeler de zaten sahip olduğumuza gerçekten benziyor. Örneğin, durdurma düğmesinde başlangıç ​​durumunu yanlış olarak ayarlayacağız. Sıfırlama düğmesi için zamanı 0 olarak ayarlayacağız ve ayrıca başlangıcı yanlış olarak ayarlayacağız. Bitmiş kronometremiz böyle görünecek.

Bu, kanca gibi bazı temel bilgileri uygulamanın güzel bir yoludur. Bu aynı teknikler, bir zamanlayıcı veya saat gibi başka benzer projeler oluşturmak için kullanılabilir. Bunu inşa etmek çok eğlenceliydi ve yapılması o kadar uzun sürmedi. Umarım benim kadar eğlenirsiniz. Mutlu kodlamalar! 😎