React による画像の表示/非表示チュートリアル | インタラクティブなユーザーインターフェイス

はじめに

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

👀 プレビュー

project preview

🎯 タスク

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

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

🏆 成果

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

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

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

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

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

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

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

表示/非表示機能の実装

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

script.js ファイルを開きます。
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 状態変数を使って条件付きで画像をレンダリングしています。

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