Rumah > Artikel > hujung hadapan web > Membina Penjana Jenaka Menggunakan React
Dalam tutorial ini, kami akan membimbing anda membina Penjana Jenaka yang ringkas dan menyeronokkan menggunakan React. Projek ini sesuai untuk pemula yang ingin berlatih mengendalikan permintaan API dalam React dan mengurus keadaan dalam komponen berfungsi.
Penjana Jenaka ini mengambil jenaka rawak daripada API dan memaparkannya pada skrin apabila pengguna mengklik butang. Ia mempunyai antara muka pengguna yang bersih dan minimalis, menjadikannya mudah untuk berinteraksi. Projek ini mengajar cara untuk menyepadukan API dan mengurus keadaan komponen dalam React.
Projek ini berstruktur seperti berikut:
├── public ├── src │ ├── components │ │ └── Joke.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
Komponen Jenaka bertanggungjawab untuk mengambil jenaka daripada API dan mengemas kini keadaan komponen untuk memaparkan jenaka. Ia menggunakan cangkuk useState React untuk mengurus keadaan jenaka dan fungsi fetchJoke untuk mendapatkan semula data daripada 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;
Dalam komponen ini, cangkuk useState digunakan untuk menyimpan jenaka yang diambil. Fungsi fetchJoke dicetuskan apabila butang "Jana Jenaka" diklik, mengambil jenaka baharu daripada API dan mengemas kini keadaan jenaka dengan hasilnya.
Komponen Apl mengendalikan reka letak keseluruhan dan menjadikan komponen Jenaka. Ia juga termasuk pengepala dan pengaki untuk meningkatkan rupa aplikasi.
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;
Komponen ini mengatur reka letak dan menambah tajuk (Joke Generator) dan pengaki yang memberikan kredit kepada pencipta.
Gaya CSS memastikan reka letak bersih dan responsif. Bekas jenaka terletak di tengah-tengah halaman dan butang digayakan untuk memberikan rupa moden.
* { 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; }
Kelas .app menggayakan reka letak utama, .joke-container memastikan jenaka dipaparkan di dalam bekas bersempadan dan .butang menyediakan penggayaan untuk butang penjanaan jenaka.
Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:
git clone https://github.com/abhishekgurjar-in/joke-generator.git cd joke-generator npm install npm start
Ini akan memulakan pelayan pembangunan, dan aplikasi akan berjalan di http://localhost:3000.
Anda boleh melihat demo langsung Penjana Jenaka di sini.
Projek Jenaka Jenaka yang ringkas ini ialah cara yang bagus untuk mengamalkan asas React, termasuk pengurusan negeri dan permintaan API. Ia juga berfungsi sebagai contoh cara membuat aplikasi web interaktif dengan kod minimum.
Abhishek Gurjar ialah pembangun web yang bersemangat membina aplikasi web yang interaktif dan responsif. Anda boleh mengikuti karya beliau di GitHub.
Atas ialah kandungan terperinci Membina Penjana Jenaka Menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!