使用 React 构建笑话生成器

php中文网 2024-10-15 11:46:47

介绍

在本教程中，我们将指导您使用 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 = () =&gt; {
  const [joke, setjoke] = usestate("");

  const fetchjoke = () =&gt; {
    fetch("https://v2.jokeapi.dev/joke/any?type=single")
      .then((response) =&gt; response.json())
      .then((data) =&gt; 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>
    &gt;
  );
};

export default joke;

在此组件中，usestate 钩子用于存储获取的笑话。单击“生成笑话”按钮时会触发 fetchjoke 函数，从 api 获取新笑话并用结果更新笑话状态。

应用程序组件

app 组件处理整体布局并渲染 joke 组件。它还包括页眉和页脚以增强应用程序的外观。

import joke from "./components/joke";
import "./app.css";

const app = () =&gt; {
  return (
    <div classname="app">
      <div classname="header">
        <h1>joke generator</h1>
      </div>
      <joke></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中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/9593.html