Kết Nối Giao Diện React Với Backend Node.js Sử Dụng Express
Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách thiết lập và kết nối giao diện frontend được xây dựng bằng React với backend sử dụng Node.js cùng với Express. Chúng ta sẽ tiến hành từng bước để xây dựng một ứng dụng mẫu, và cuối cùng là hiển thị dữ liệu từ server lên giao diện người dùng. Bắt đầu nào!
1. Thiết Lập Dự Án
Đầu tiên, hãy tạo một thư mục mới với tên simple_project và mở nó bằng IDE mà bạn thích. Cấu trúc dự án của chúng ta sẽ bao gồm hai thư mục chính:
frontend: Chứa ứng dụng Reactbackend: Chứa API của Node.js
2. Thiết Lập Giao Diện Frontend
Bên trong thư mục frontend, chúng ta sẽ sử dụng Vite để khởi tạo ứng dụng React, kèm theo Tailwind CSS để tạo giao diện đẹp mắt. Điều hướng vào thư mục này và chạy lệnh dưới đây để tạo ứng dụng:
bash
npm create vite@latestKhi được hỏi, hãy chọn:
- Project name:
. - Select a framework:
React - Select a variant:
JavaScript
Sau đó, cài đặt các phần phụ thuộc:
bash
npm installTiếp theo, để sử dụng Tailwind CSS, hãy cài đặt các gói cần thiết:
bash
npm install tailwindcss @tailwindcss/viteSau khi cài đặt, thư mục frontend của bạn sẽ nhìn như sau:
node_modules
public
src
├── App.jsx
├── index.css
├── main.jsx
.gitignore
...3. Cấu Hình Vite
Sửa đổi tệp vite.config.js của bạn để tích hợp Tailwind CSS:
javascript
import { defineConfig } from 'vite';
import tailwindcss from "@tailwindcss/vite";
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react(), tailwindcss()]
});4. Tạo Thành Phần Ứng Dụng
Mở tệp App.jsx và cập nhật nội dung như sau:
javascript
function App() {
return (
<div className="min-h-screen w-full bg-gray-100 flex items-center justify-center flex-col gap-10">
<h1 className="text-5xl font-bold text-gray-800">
Kết Nối Backend Với Express và Node
</h1>
<ul className="rounded-2xl shadow-lg bg-white space-y-3"></ul>
</div>
);
}
export default App;5. Thiết Lập Các Thành Phần Backend
Chuyển sang thư mục backend:
bash
cd backendKhởi tạo tệp package.json:
bash
npm init -yTrong tệp package.json, đặt thuộc tính main thành server.js, và thêm thuộc tính:
json
"type": "module"Cài đặt Express và CORS:
bash
npm install express corsTạo tệp server.js trong thư mục backend và thêm nội dung sau:
javascript
import express from "express";
import cors from "cors";
const app = express();
const CORS_OPTIONS = {
origin: ["http://localhost:5173"]
};
app.use(cors(CORS_OPTIONS));
app.get("/", (req, res) => {
res.json({
blogPosts: [
{ title: "Trở lại của Neymar tại Santos", content: "Grêmio sẽ phải đối mặt với cạnh tranh khốc liệt khi Neymar trở lại Santos." },
{ title: "Tầm quan trọng của Marketing Kỹ thuật số đối với Doanh nghiệp", content: "Marketing kỹ thuật số là công cụ mạnh mẽ giúp thúc đẩy tăng trưởng doanh nghiệp. " }
]
});
});
app.listen(8080, () => {
console.log("Server đang chạy trên cổng 8080");
});Chúng ta sử dụng CORS để cho phép giao tiếp giữa hai ứng dụng đang chạy trên các cổng khác nhau (5173 cho frontend và 8080 cho backend).
6. Lấy Dữ Liệu Từ Frontend
Quay lại thư mục frontend và cài đặt axios để thực hiện các yêu cầu HTTP:
bash
npm install axiosCập nhật App.jsx để lấy dữ liệu từ backend:
javascript
import axios from "axios";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
const fetchData = async () => {
const response = await axios.get("http://localhost:8080");
setData(response.data.blogPosts);
};
useEffect(() => {
fetchData();
}, []);
return (
<div className="min-h-screen w-full bg-gray-950 flex items-center justify-center flex-col gap-10">
<h1 className="text-5xl font-bold text-gray-100">
Backend với Express và <span className="text-green-400"> Node</span>
</h1>
<ul className="rounded-2xl shadow-lg p-5 bg-white space-y-3">
{data.map((post, index) => (
<li key={index} className="bg-sky-100 p-4 rounded-2xl hover:scale-105 transition-transform">
<p className="text-xl font-semibold text-gray-800">{post.title}</p>
<p className="text-sm text-gray-600">{post.content}</p>
</li>
))}
</ul>
</div>
);
}
export default App;Sử dụng hook useState giúp lưu trữ dữ liệu đã lấy và useEffect đảm bảo dữ liệu được cập nhật ngay khi thành phần được gắn kết.
7. Chạy Ứng Dụng
Mở hai cửa sổ terminal để chạy cả frontend và backend:
bash
# Trong thư mục frontend
npm run dev
# Trong thư mục backend
node server.jsGiờ đây, bạn có thể mở trình duyệt và truy cập vào http://localhost:5173/ để xem các bài viết trên blog hiển thị trên màn hình.
Chúc mừng bạn! Bạn đã hoàn thành việc kết nối thành công frontend React với backend Node.js thông qua Express!
