در این سؤال قرار است که یک زمان‌سنج ساده با React طراحی کنید.
به این صورت که از لحظه load شدن زمان شروع به افزایش کند
و با فشردن دکمه‌ی `Reset Timer` این زمان مجدداً صفر شود.
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/UDq0uUHK3s/simple-timer.zip)
دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
simple-timer
├── public
│ ├── favicon.png
│ └── index.html
├── src
│ ├── Timer.css
│ ├── Timer.js
│ └── index.js
├── package.json
└── pnpm-lock.yaml
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` (یا `pnpm`) را از قبل نصب کرده باشید.**
- در پوشه‌ی `simple-timer` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- **نکته:** برای نصب سریع‌تر از `pnpm install` استفاده کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- با مراجعه به `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
شما باید مؤلفه‌ی `Timer` را به صورت زیر تکمیل کنید:
- مؤلفه پس از `load` شدن، ابتدا عدد صفر را نمایش دهد و شروع به شمردن کند (هر یک ثانیه).
- پس از هربار فشردن دکمه‌ی `Reset Timer` زمان مجدداً از صفر آغاز شود.
- توجه کنید که پس از آغاز مجدد زمان‌سنج، شمارش از ثانیه‌ی صفر تا یک باید دقیقاً ۱ ثانیه طول بکشد.
- هنگام حذف مؤلفه (Unmount) باید زمان‌بندی ایجاد شده را پاک کنید (`clearInterval`).
# نکات
- زمان باید در عنصر با کلاس `timer` نمایش داده شود (نام کلاس در داوری تاثیر دارد).
- در این سؤال کد شما **نباید** به ساعت سیستم وابسته باشد (مثلاً نباید از `Date` استفاده کنید).
عدد زمان‌سنج نباید با تغییر ساعت به هم بریزد.
- پس از پیاده‌سازی، فایل `Timer.js` را ارسال کنید.