Reactフックでカウントダウンタイマーを作成する方法
序章
このチュートリアルでは、Reactフックを使用してカウントダウンタイマーを作成し、Reactコンポーネントの状態を更新して副作用を管理します。
Reactフックを使用すると、よりクリーンなコード、コンポーネント間で再利用可能なロジックを作成し、クラスなしで状態を更新できます。
カウントダウンタイマーは一般的なUIコンポーネントです。 ユーザーは、何かをしている時間や、イベントが発生するまでの時間をユーザーに伝えることができます。 このチュートリアルでカウントダウンするイベントは、DigitalOceanのHacktoberfestです。
このチュートリアルの終わりまでに、ReactのuseState()
およびuseEffect()
フックを使用した機能的で再利用可能なカウントダウンタイマーができあがります。
前提条件
このガイドを開始する前に、次のものが必要です。
- Node.jsを実行する開発環境が必要になります。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはの
PPAを使用したインストール ]セクションの手順に従います。 Ubuntu18.04