はじめに
フロントエンドスキル向上のため書籍やudemyでインプットを行っていますが、アウトプットも並行して進めるべく@Sicut_studyさんのReact100本ノックを始めることにしました。
ルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
今回作るもの
タイマーアプリ
条件
@Sicut_studyさんとは少し違う条件で実装しています。
1. ユーザーは分と秒を入力してタイマーを設定できる。
2. スタートボタンを押すとカウントダウンが開始。
3. 一時停止ボタンを押すとカウントダウンが停止。
4. リセットボタンでタイマーが設定時間に戻る。
成果物
使用技術
- React
- TypeScript
- MUI
PC
SP
感想
今回タイマーアプリを実装するにあたりuseEffectを使用しましたが、その偉大さを痛感しました。。。
あと要素の非活性にする際 disabled を使用していたのですが、これがアクセシビリティ的によろしくないということを初めて知りました。
作っていく中で色んな発見があるのでホントに面白いです！