Membina Penjana Jenaka Menggunakan React

pengenalan

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.

Gambaran Keseluruhan Projek

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.

Ciri-ciri

• Generasi Jenaka Rawak: Mengambil jenaka rawak daripada API dan memaparkannya pada skrin.
• Reka Bentuk Responsif: Melaraskan kepada pelbagai saiz skrin untuk pengalaman mesra pengguna.
• Antara Muka Mudah Digunakan: Satu butang untuk menjana jenaka baharu pada setiap klik.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna.
• CSS: Untuk menggayakan aplikasi dan memastikan reka bentuk responsif.
• API Jenaka: Untuk mengambil jenaka rawak daripada web.

Struktur Projek

Projek ini berstruktur seperti berikut:

├── public
├── src
│   ├── components
│   │   └── Joke.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Komponen Utama

• Joke.jsx: Mengandungi logik untuk mengambil dan memaparkan jenaka.
• App.jsx: Membungkus komponen Jenaka dan mengendalikan reka letak keseluruhan aplikasi.
• App.css: Menyediakan penggayaan untuk apl dan komponen.

Penerangan Kod

Komponen Jenaka

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

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.

Penggayaan CSS

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.

Pemasangan dan Penggunaan

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.

Demo Langsung

Anda boleh melihat demo langsung Penjana Jenaka di sini.

Kesimpulan

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.

Kredit

• Inspirasi: Projek ini diilhamkan oleh penjana jenaka dalam talian dan projek berasaskan API.

Pengarang

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!