Mencipta Aplikasi Timbunan Penuh Mudah dengan React dan Node.js

Dalam blog saya sebelum ini, saya memperkenalkan React dan Node.js. Sekarang, mari kita kumpulkan mereka untuk membina sesuatu yang lebih menarik: aplikasi tindanan penuh yang mudah! Anda mungkin menganggap apl tindanan penuh hanya untuk projek yang lebih besar, dengan berbilang pangkalan data dan struktur yang kompleks. Walaupun dari segi konsep itu benar, secara praktikalnya, aplikasi tindanan penuh boleh semudah bahagian hadapan kecil dengan hujung belakang asas. Jadi, mari kita pecahkan dan lihat betapa mudahnya untuk mencipta apl tindanan penuh dengan React dan Node.js.

Langkah 1: Backend dengan Node.js dan Express

Mari kita mulakan dengan membuat bahagian belakang. Kami akan menggunakan Express sebagai pelayan kami untuk menghantar respons mesej JSON yang mudah ke bahagian hadapan.

1. Pasang Express: Untuk bermula, mula-mula pasang Express dengan menjalankan arahan ini dalam terminal anda:

   npm install express

1. Buat pelayan: Sekarang, mari buat pelayan dengan laluan mudah yang akan mengembalikan mesej ucapan.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Penjelasan:

• Kami mengimport modul ekspres dan mencipta contoh dengan ekspres().
• Kami menyediakan laluan GET mudah di /greet yang membalas dengan objek JSON yang mengandungi mesej ucapan.
• Kami memulakan pelayan pada port 3000, dan konsol akan log bahawa pelayan sedang berjalan.

---

Langkah 2: Bahagian hadapan dengan React

Sekarang, mari buat bahagian hadapan menggunakan React. Kami akan menggunakan dua cangkuk: useState dan useEffect untuk mengambil data dari bahagian belakang.

1. Buat apl React: Jika anda belum menyediakan apl React anda, anda boleh membuat apl menggunakan create-react-app dengan menjalankan:

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. Tulis kod bahagian hadapan: Sekarang, mari kita ubah suai fail App.js untuk mengambil data dari bahagian belakang kami dan memaparkannya.

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

Penjelasan:

• useState digunakan untuk menyimpan data respons dari bahagian belakang.
• useEffect digunakan untuk mencetuskan permintaan pengambilan apabila komponen dipasang.
• Kami menggunakan API fetch() untuk menghantar permintaan ke http://localhost:3000/greet dan mengendalikan respons. Jika pengambilan berjaya, kami mengemas kini keadaan respons dengan mesej dari hujung belakang.
• Kami memaparkan respons dalam komponen, menunjukkan "Memuatkan..." semasa permintaan sedang dijalankan.

---

Langkah 3: Menjalankan Apl

1. Mulakan bahagian belakang: Dalam folder bahagian belakang (tempat fail server.js anda berada), jalankan:

   npm install express

1. Mulakan bahagian hadapan: Dalam folder bahagian hadapan (tempat apl React anda berada), jalankan:

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

Sekarang, buka penyemak imbas anda dan pergi ke http://localhost:3000. Anda sepatutnya melihat mesej ringkas yang diambil dari bahagian belakang, dan ia akan memaparkan "Zee di sini...".

---

Kesimpulan

Dan itu sahaja! Anda baru sahaja mencipta aplikasi tindanan penuh yang mudah menggunakan React dan Express. Ia adalah permulaan yang hebat, dan dengan asas ini, anda boleh mengembangkan dan membina aplikasi yang lebih kompleks. Selamat mengekod!

---

Pengambilan Utama:

• Aplikasi tindanan penuh tidak perlu rumit. Bahagian hadapan dan hujung belakang yang ringkas boleh dianggap tindanan penuh.
• Kait useState dan useEffect React sangat bagus untuk mengambil data daripada API bahagian belakang.
• Express ialah rangka kerja yang ringkas dan berkuasa untuk membina API bahagian belakang.

Atas ialah kandungan terperinci Mencipta Aplikasi Timbunan Penuh Mudah dengan React dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!