介紹
在本教程中，我們將指導您使用 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中文網其他相關文章！
