インタラクティブな React コンポーネントを構築する

はじめに

このプロジェクトでは、React を使って簡単な表示/非表示機能を作成する方法を学びます。ページ上の画像の表示状態を切り替えるボタンを実装します。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• HTML、CSS、JavaScript ファイルを使って React プロジェクトをセットアップする方法
• useStateフックを使ってアプリケーションの状態を管理する方法
• 状態に基づいてコンポーネントを条件付きでレンダリングする方法
• CSS を使ってコンポーネントをスタイリッシングする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• 基本的な React アプリケーションを作成する
• 要素の表示状態を制御するための状態管理を実装する
• React プロジェクトに HTML、CSS、JavaScript を統合する
• React を使ってインタラクティブなユーザーインターフェイスを構築する基本を理解する

プロジェクトのセットアップ

このステップでは、プロジェクトをセットアップし、提供されたファイルに慣れ親しむことができます。

1. 右側のエディタを開きます。プロジェクトディレクトリには、次のファイルがあります。

├── style.css
├── index.html
├── script.js
└── dog.png

2. 右下の「Go Live」をクリックして、ポート 8080 でプロジェクトを開きます。

表示/非表示機能の実装

このステップでは、ボタンを使って画像を表示および非表示にする機能を実装します。

1. script.js ファイルを開きます。
2. App コンポーネントを作成します。

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Hide Element" : "Show Element"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

このコンポーネントでは：

• useState フックを使って、状態変数 show とそれを更新する関数 setShow を作成しています。
• show の初期値は true に設定されています。
• クリックすると show の値を切り替えるボタンをレンダリングしています。
• ボタンのテキストは show の値に基づいて変化します。
• show 状態変数を使って条件付きで画像をレンダリングしています。

3. App.js ファイルを保存します。
4. ブラウザでページを更新します。
5. 「Hide Element」ボタンをクリックして画像を非表示にします。
6. 「Show Element」ボタンをクリックして画像を再度表示します。

おめでとうございます！「Show and Hide」プロジェクトを完了しました。ボタンを使って簡単な表示/非表示機能を React を使って作成する方法を学びました。

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。