使用 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中文网其他相关文章！