Menyediakan Bahagian Belakang Node.js untuk Aplikasi React Anda

Menggabungkan bahagian hadapan React dengan bahagian belakang Node.js ialah persediaan biasa dan berkuasa untuk membina aplikasi web tindanan penuh. Node.js menyediakan persekitaran yang teguh untuk pembangunan sisi pelayan, membolehkan anda mengendalikan API, pengesahan dan operasi pangkalan data dengan berkesan. Dalam panduan ini, kami akan meneruskan penyediaan bahagian belakang Node.js untuk aplikasi React anda.

Prasyarat
Sebelum menyelam, pastikan anda telah memasang yang berikut:

• Node.js: Muat turun dari nodejs.org.
• npm atau benang: Didatangkan bersama Node.js.
• Pemahaman asas JavaScript, React dan Node.js.

Langkah 1: Mulakan Bahagian Belakang Node.js Anda

1. Cipta Direktori Baharu:

mkdir react-node-app
cd react-node-app

2. Mulakan Projek Node.js:

npm init -y 

Ini akan menjana fail package.json dengan tetapan lalai.

3. Pasang Express.js:
Express ialah rangka kerja ringan untuk membina aplikasi Node.js.

npm install express

Langkah 2: Sediakan Pelayan Ekspres

1. Cipta Fail index.js:
Dalam direktori projek anda, buat fail bernama index.js.

2. Tulis Kod Pelayan Asas:

const express = require('express');  
const app = express();  
const PORT = 5000;  

app.get('/', (req, res) => {  
    res.send('Backend is running!');  
});  

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

3. Jalankan Pelayan:
Mulakan pelayan anda dengan:

node index.js  

Lawati http://localhost:5000 dalam penyemak imbas anda untuk melihat respons.

Langkah 3: Sambungkan React Frontend

1. Cipta Apl React:
Dalam direktori yang sama, gunakan create-react-app atau Vite untuk menyediakan bahagian hadapan.

npx create-react-app client  
cd client  

2. Jalankan Apl React:
Mulakan pelayan pembangunan React:

npm start

Apl React anda akan dijalankan pada http://localhost:3000.

Langkah 4: Konfigurasikan Proksi untuk Panggilan API

Untuk membuat permintaan API daripada React ke bahagian belakang Node.js, konfigurasikan proksi dalam apl React.

1. Tambahkan Proksi pada package.json:
Dalam package.json apl React, tambahkan yang berikut:

"proxy": "http://localhost:5000"

2. Buat Panggilan API dalam React:
Contoh: Ambil data daripada pelayan Node.js.

import React, { useEffect, useState } from 'react';  

function App() {  
    const [message, setMessage] = useState('');  

    useEffect(() => {  
        fetch('/')  
            .then((res) => res.text())  
            .then((data) => setMessage(data));  
    }, []);  

    return <div>{message}</div>;  
}  

export default App; 

Langkah 5: Tambahkan Titik Akhir API

Tingkatkan bahagian belakang anda dengan titik akhir API tersuai.

1. Kemas kini index.js:

app.get('/api/data', (req, res) => {  
    res.json({ message: 'Hello from the backend!' });  
}); 

2. Kemas Kini Reaksi untuk Mengambil Data:

useEffect(() => {  
    fetch('/api/data')  
        .then((res) => res.json())  
        .then((data) => setMessage(data.message));  
}, []);

Langkah 6: Sambung ke Pangkalan Data (Pilihan)

Untuk menjadikan bahagian belakang lebih dinamik, sambung ke pangkalan data seperti MongoDB.

1. Pasang Pemacu MongoDB atau Mongoose:

mkdir react-node-app
cd react-node-app

2. Sediakan Sambungan Pangkalan Data:
Kemas kini fail index.js anda:

npm init -y 

Langkah 7: Sebarkan Aplikasi Anda

1. Gunakan Bahagian Belakang pada Heroku atau Render:

• Gunakan platform seperti Heroku atau Render untuk mengehos bahagian belakang Node.js.

2. Gunakan React pada Vercel atau Netlify:

• Platform seperti Vercel atau Netlify sangat baik untuk menggunakan apl React.

Kesimpulan
Menyediakan bahagian belakang Node.js untuk aplikasi React menyediakan persekitaran pembangunan tindanan penuh yang teguh. Dengan mengikuti panduan ini, anda akan mempunyai asas yang kukuh untuk membina aplikasi web berskala dan berprestasi. Dengan bahagian belakang anda tersedia, anda boleh mengembangkan aplikasi anda untuk menyertakan ciri seperti pengesahan, kemas kini masa nyata dan penyepaduan pangkalan data.

Mulakan pengekodan dan hidupkan projek tindanan penuh anda! ?

Atas ialah kandungan terperinci Menyediakan Bahagian Belakang Node.js untuk Aplikasi React Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!