در این سؤال قرار است که یک زمان‌سنج ساده با React طراحی کنید. به این صورت که از لحظه load شدن زمان شروع به افزایش کند و با فشردن دکمه‌ی Reset Timer این زمان مجدداً صفر شود.

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

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 را ارسال کنید.