이 튜토리얼에서는 React를 사용하여 간단하고 재미있는 Joke Generator를 구축하는 방법을 안내합니다. 이 프로젝트는 React에서 API 요청 처리 및 기능적 구성 요소 내 상태 관리를 연습하려는 초보자에게 적합합니다.
이 농담 생성기는 API에서 임의의 농담을 가져와 사용자가 버튼을 클릭하면 화면에 표시합니다. 깨끗하고 최소한의 사용자 인터페이스를 갖추고 있어 상호 작용이 간단합니다. 이 프로젝트에서는 React에서 API를 통합하고 구성요소 상태를 관리하는 방법을 가르칩니다.
프로젝트의 구성은 다음과 같습니다.
├── public ├── src │ ├── components │ │ └── Joke.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
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 스타일을 사용하면 레이아웃이 깔끔하고 반응성이 좋습니다. 농담 컨테이너가 페이지 중앙에 배치되고, 버튼이 모던한 느낌을 주는 스타일로 디자인되었습니다.
* { 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에서 실행됩니다.
여기에서 농담 생성기의 라이브 데모를 확인할 수 있습니다.
이 간단한 Joke Generator 프로젝트는 상태 관리 및 API 요청을 포함한 React 기본 사항을 연습할 수 있는 좋은 방법입니다. 또한 최소한의 코드로 대화형 웹 애플리케이션을 만드는 방법을 보여주는 예이기도 합니다.
Abhishek Gurjar는 대화형 및 반응형 웹 애플리케이션 구축에 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.
위 내용은 React를 사용하여 농담 생성기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!