React.jsでスイッチを作成する方法

まず、React.jsプロジェクトをセットアップする必要があります。プロジェクトディレクトリで以下のコマンドを実行して、Reactアプリを作成します。

npx create-react-app switch-app
cd switch-app

次に、Switchコンポーネントを作成します。新しいファイルSwitch.jsを作成し、以下のコードを追加します。

import React, { useState } from 'react';
const Switch = () => {
  const [isOn, setIsOn] = useState(false);
  const handleToggle = () => {
    setIsOn(!isOn);
  };
  return (
    <div>
      <button onClick={handleToggle}>{isOn ? 'ON' : 'OFF'}</button>
    </div>
  );
};
export default Switch;

上記のコードでは、useStateフックを使用してisOnという状態変数を定義しています。handleToggle関数は、ボタンがクリックされたときにisOnの値を反転させます。最後に、isOnの値に基づいてボタンのテキストを切り替えます。

次に、AppコンポーネントでSwitchコンポーネントを使用します。App.jsファイルを開き、以下のコードを追加します。

import React from 'react';
import Switch from './Switch';
const App = () => {
  return (
    <div>
      <h1>React Switch Example</h1>
      <Switch />
    </div>
  );
};
export default App;

これで、Switchコンポーネントが表示されるようになりました。

最後に、index.jsファイルを開き、ReactDOM.renderメソッドの呼び出しを以下のように変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

これで、Reactアプリケーションにスイッチが表示されるようになりました。

以上がReact.jsでスイッチを作成する方法の簡単な例です。このコードをベースにカスタマイズや拡張を行うことができます。詳細なReact.jsの使い方や他のコンポーネントとの組み合わせ方については、公式ドキュメントやチュートリアルを参考にしてください。