Reagisci cronometro

Questa settimana sono tornato alle origini per ritoccare l'uso dei ganci costruendo un cronometro con reazione. Penso che questo sia un bel piccolo progetto che può essere affrontato in poche ore ed è un buon modo per esercitarsi con gli hook React. Con questo cronometro puoi avviare il tempo, fermare il tempo e azzerarlo. Iniziamo e guardiamo il codice.

Rimuoveremo tutti i file nella cartella src ad eccezione di App.css, App.js e index.js e rimuoveremo tutte le importazioni. Useremo gli hook di stato ed effetto. Ecco come apparirà il nostro componente iniziale.

Ottimo, quindi ora dobbiamo mostrare il nostro tempo. Inizieremo visualizzando i millisecondi. Iniziamo costruendo il nostro useEffect. Per prima cosa verrà definito il nostro intervallo e se start è vero il timer partirà, altrimenti cancelleremo l'intervallo. Nel secondo argomento di useEffect passeremo in un array con start. Ciò significa che il nostro effetto verrà eseguito quando lo stato di avvio cambia. Aggiungeremo anche una dichiarazione di reso per la pulizia. Infine avremo un pulsante che avvierà il tempo una volta cliccato. Ecco come apparirà.

Ora il nostro tempo inizierà a contare. A partire da ora non c'è modo di fermare o ripristinare il cronometro. Dobbiamo anche formattare ciò che viene visualizzato in modo che il numero appaia correttamente. C'è un bel trucco per farlo. Per prima cosa divideremo il tempo per 10 perché questo è il valore di un millisecondo, quindi modulo 1000. Ora lo aggiungeremo a zero in modo che all'inizio del tempo ci sia già uno zero invece di una sola cifra. Infine affettare e passare un parametro di -2 in modo che quando il numero diventa due cifre lo zero verrà rimosso. Ecco come apparirà.

Ora il numero visualizzato avrà più senso. Infine quello che dobbiamo fare è mostrare i secondi, i minuti e creare i pulsanti di stop e reset. La creazione dei minuti e dei secondi è molto simile a ciò che abbiamo fatto con i millisecondi. Possiamo copiare e incollare e apportare alcune modifiche. Invece di usare il modulo per 1000, lo faremo per 60. Un'altra cosa che dovremo fare è arrotondare i numeri per difetto poiché i numeri decimali verranno visualizzati se lo lasciamo così com'è. Anche i pulsanti sono molto simili a quello che abbiamo già. Ad esempio, imposteremo lo stato di avvio su false nel pulsante di arresto. Per il pulsante di ripristino imposteremo il tempo su 0 e imposteremo anche start su false. Ecco come apparirà il nostro cronometro finito.

Questo è un bel modo per esercitarsi con alcuni fondamentali come gli hook. Queste stesse tecniche possono essere utilizzate per creare altri progetti simili come un timer o un orologio. È stato molto divertente costruirlo e non ci è voluto molto tempo per farlo. Spero che ti diverta tanto quanto me. Buona codifica!