Reactでカスタムトグルスイッチを構築する方法

序章

Webアプリケーションの構築には、通常、ユーザーとの対話のための準備が含まれます。 ユーザーとの対話を準備する重要な方法の1つは、フォームを使用することです。 ユーザーからさまざまな種類の入力を受け取るために、さまざまなフォームコンポーネントが存在します。 たとえば、パスワードコンポーネントは、ユーザーから機密情報を取得し、それが表示されないようにマスクします。

ほとんどの場合、ユーザーから取得する必要のある情報は boolean-like です。たとえば、yesまたはno、trueまたは false 、enableまたはdisable、onまたはoffなど。 従来、チェックボックスフォームコンポーネントは、これらの種類の入力を取得するために使用されます。 ただし、最近のインターフェイスデザインでは、アクセシビリティの問題がいくつかありますが、チェックボックスの代わりにトグルスイッチが一般的に使用されています。

このチュートリアルでは、Reactを使用してカスタムトグルスイッチコンポーネントを構築する方法を説明します。 チュートリアルの最後に、カスタムトグルスイッチコンポーネントを使用するデモReactアプリがあります。

これは、このチュートリアルで構築する最終的なアプリケーションのデモです。

前提条件

始める前に、次のものが必要です。

• Node.jsおよびnpmバージョン5.2以降がマシンにインストールされています。 Nodeをインストールしてnpmのバージョンを確認するには、ご使用の環境のNode.jsのインストール方法とローカル開発環境の作成方法ガイドを参照してください。 npm 5.2以降を使用すると、npxコマンドを利用できるようになります。 npxを使用すると、パッケージをグローバルにダウンロードせずにcreate-react-appを実行できます。

• このチュートリアルは、あなたがすでにReactに精通していることを前提としています。 そうでない場合は、 React.js チュートリアルシリーズのコーディング方法を確認するか、Reactドキュメントを読んでReactの詳細を確認してください。

ステップ1—はじめに

開始するには、npxとcreate-react-appを使用して新しいReactアプリケーションを作成します。 アプリケーションには任意の名前を付けることができますが、このチュートリアルではreact-toggle-switchを使用します。

npx create-react-app react-toggle-switch

次に、アプリケーションに必要な依存関係をインストールします。 ターミナルウィンドウを使用して、プロジェクトディレクトリに移動します。

cd react-toggle-switch

次のコマンドを実行して、必要な依存関係をインストールします。

npm install [email protected] [email protected] [email protected] [email protected] [email protected]