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