首頁 > web前端 > css教學 > 使用 React 建立笑話產生器

使用 React 建立笑話產生器

王林
發布: 2024-09-09 06:33:39
原創
842 人瀏覽過

Building a Joke Generator Using React

介紹

在本教程中,我們將指導您使用 React 建立一個簡單而有趣的笑話產生器。這個專案非常適合想要練習在 React 中處理 API 請求以及管理功能元件中的狀態的初學者。

項目概況

這個笑話產生器從 API 中獲取隨機笑話,並在使用者點擊按鈕時將其顯示在螢幕上。它具有乾淨簡約的用戶介面,使其易於互動。該專案教授如何在 React 中整合 API 和管理元件狀態。

特徵

  • 隨機笑話產生:從 API 中獲取隨機笑話並將其顯示在螢幕上。
  • 響應式設計:適應各種螢幕尺寸,提供使用者友善的體驗。
  • 易於使用的介面:每次點擊即可產生新笑話的單一按鈕。

使用的技術

  • React:用於建立使用者介面。
  • CSS:用於設計應用程式樣式並確保響應式設計。
  • 笑話 API:從網路上取得隨機笑話。

專案結構

專案的架構如下:

├── 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;
登入後複製

此元件組織佈局並添加標題(笑話產生器)和頁腳,以表彰創建者。

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 上運行。

現場演示

您可以在此處查看笑話產生器的現場演示。

結論

這個簡單的笑話產生器專案是練習 React 基礎知識(包括狀態管理和 API 請求)的好方法。它還作為如何使用最少程式碼建立互動式 Web 應用程式的範例。

製作人員

  • 靈感:這個專案的靈感來自線上笑話產生器和基於 API 的專案。

作者

Abhishek Gurjar 是一位熱衷於建立互動式和響應式 Web 應用程式的 Web 開發人員。您可以在 GitHub 上關注他的工作。

以上是使用 React 建立笑話產生器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板