در این سؤال قرار است که یک زمان‌سنج ساده با 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` را ارسال کنید.

حل سؤال در بانک سؤالات