React を使用してジョーク ジェネレーターを構築する

導入

このチュートリアルでは、React を使用してシンプルで楽しいジョーク ジェネレーターを構築する方法を説明します。このプロジェクトは、React での API リクエストの処理と機能コンポーネント内の状態管理を練習したい初心者に最適です。

プロジェクト概要

このジョーク ジェネレーターは API からランダムなジョークを取得し、ユーザーがボタンをクリックすると画面に表示します。クリーンでミニマルなユーザー インターフェイスを備えており、操作が簡単です。このプロジェクトでは、React で API を統合し、コンポーネントの状態を管理する方法を学びます。

特徴

• ランダム ジョーク生成: API からランダムなジョークを取得し、画面に表示します。
• レスポンシブ デザイン: さまざまな画面サイズに合わせて調整し、使いやすいエクスペリエンスを実現します。
• 使いやすいインターフェース: クリックするたびに新しいジョークを生成する 1 つのボタン。

使用されている技術

• React: ユーザー インターフェイスの構築用。
• CSS: アプリケーションのスタイルを設定し、レスポンシブなデザインを確保します。
• Joke API: Web からランダムなジョークを取得します。

プロジェクトの構造

プロジェクトは次のように構成されています:

├── public
├── src
│   ├── components
│   │   └── Joke.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

主要コンポーネント

• Joke.jsx: ジョークを取得して表示するためのロジックが含まれています。
• App.jsx: Joke コンポーネントをラップし、アプリケーション全体のレイアウトを処理します。
• App.css: アプリとコンポーネントのスタイルを提供します。

コードの説明

ジョークコンポーネント

Joke コンポーネントは、API からジョークを取得し、ジョークを表示するためにコンポーネントの状態を更新する責任があります。 React の useState フックを使用してジョーク状態を管理し、fetchJoke 関数を使用して API からデータを取得します。

import { useState } from "react";

const Joke = () => {
  const [joke, setJoke] = useState("");

  const fetchJoke = () => {
    fetch("https://v2.jokeapi.dev/joke/Any?type=single")
      .then((response) => response.json())
      .then((data) => setJoke(data.joke));
  };

  return (
    <>
      <div className="joke-container">
        <div className="output">
          <p>{joke}</p>
        </div>
      </div>
      <button className="button" onClick={fetchJoke}>
        <p>Generate Joke</p>
      </button>
    </>
  );
};

export default Joke;

このコンポーネントでは、useState フックを使用して、取得したジョークを保存します。 fetchJoke 関数は、[ジョークの生成] ボタンをクリックするとトリガーされ、API から新しいジョークを取得し、その結果でジョークの状態を更新します。

アプリコンポーネント

App コンポーネントは全体のレイアウトを処理し、Joke コンポーネントをレンダリングします。アプリケーションの外観を向上させるヘッダーとフッターも含まれています。

import Joke from "./components/Joke";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Joke Generator</h1>
      </div>
      <Joke />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

このコンポーネントはレイアウトを整理し、タイトル (Joke Generator) と作成者のクレジットを示すフッターを追加します。

CSS スタイル

CSS スタイルにより、レイアウトがきれいで応答性が高くなります。ジョーク コンテナはページの中央に配置され、ボタンはモダンな外観を与えるようにスタイル設定されています。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #ffff42;
  color: black;
}
.app {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.header {
  margin-bottom: 10px;
}
.joke-container {
  margin: 15px;
  width: 400px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  background-color: #c2edf6;
  border-radius: 7px;
}
.output {
  width: 350px;
  font-size: 16px;
  font-weight: 500;
}
.button {
  width: 400px;
  background-color: #0075e1;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
}
.button:hover {
  background-color: #4086c8;
}
.footer {
  margin-top: 100px;
}

.app クラスはメイン レイアウトのスタイルを設定し、.joke-container はボーダー付きコンテナ内にジョークが表示されるようにし、.button はジョーク生成ボタンのスタイルを提供します。

インストールと使用方法

このプロジェクトを開始するには、リポジトリのクローンを作成し、依存関係をインストールします。

git clone https://github.com/abhishekgurjar-in/joke-generator.git
cd joke-generator
npm install
npm start

これにより開発サーバーが起動し、アプリケーションが http://localhost:3000 で実行されます。

ライブデモ

ここでジョーク ジェネレーターのライブ デモをチェックできます。

結論

このシンプルなジョーク ジェネレーター プロジェクトは、状態管理や API リクエストなど、React の基礎を練習するのに最適な方法です。また、最小限のコードでインタラクティブな Web アプリケーションを作成する方法の例としても役立ちます。

クレジット

• インスピレーション: このプロジェクトは、オンライン ジョーク ジェネレーターと API ベースのプロジェクトからインスピレーションを受けています。

著者

Abhishek Gurjar は、インタラクティブで応答性の高い Web アプリケーションの構築に情熱を注ぐ Web 開発者です。彼の作品は GitHub でフォローできます。

以上がReact を使用してジョーク ジェネレーターを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。