介绍
在本教程中，我们将指导您使用 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 ( {joke}
在此组件中，usestate 钩子用于存储获取的笑话。单击“生成笑话”按钮时会触发 fetchjoke 函数，从 api 获取新笑话并用结果更新笑话状态。
应用程序组件
app 组件处理整体布局并渲染 joke 组件。它还包括页眉和页脚以增强应用程序的外观。
import joke from "./components/joke";import "./app.css";const app = () => { return ( );};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.gitcd joke-generatornpm installnpm start
这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。
现场演示
您可以在此处查看笑话生成器的现场演示。
结论
这个简单的笑话生成器项目是练习 react 基础知识（包括状态管理和 api 请求）的好方法。它还作为如何使用最少代码创建交互式 web 应用程序的示例。
制作人员
灵感：该项目的灵感来自在线笑话生成器和基于 api 的项目。
作者
abhishek gurjar 是一位热衷于构建交互式和响应式 web 应用程序的 web 开发人员。您可以在 github 上关注他的工作。
以上就是使用 React 构建笑话生成器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491220.html
微信扫一扫 
支付宝扫一扫 
