30. Kết Nối React Js Với Server Nodejs

Kết nối ReactJS với một máy chủ Node.js có thể được thực hiện thông qua giao thức HTTP hoặc WebSocket. Dưới đây là các bước cơ bản để kết nối hai phần này với nhau:

Xây dựng máy chủ Node.js:
- Sử dụng Node.js để xây dựng máy chủ để xử lý các yêu cầu từ phía React.
- Bạn có thể sử dụng các framework như Express.js để xây dựng máy chủ dễ dàng hơn.
- Xử lý các yêu cầu từ React và trả về dữ liệu dưới định dạng JSON hoặc HTML tùy thuộc vào ứng dụng của bạn.
Frontend React:
- Sử dụng thư viện như axios hoặc fetch để thực hiện các yêu cầu HTTP từ React tới máy chủ Node.js.
- Đối với ví dụ, tạo một component React để gửi yêu cầu và nhận dữ liệu từ máy chủ:

jsx

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Gửi yêu cầu GET đến máy chủ Node.js để lấy dữ liệu
    axios.get('http://localhost:3001/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from Node.js Server</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Xử lý dữ liệu ở máy chủ Node.js:
- Xử lý yêu cầu từ React và trả về dữ liệu theo đúng định dạng (thường là JSON).
- Sử dụng các thư viện Node.js để thao tác dữ liệu, truy vấn cơ sở dữ liệu, v.v.
Thực hiện các yêu cầu khác:
- Ngoài yêu cầu GET, bạn có thể thực hiện các yêu cầu POST, PUT, DELETE từ React tới máy chủ Node.js bằng cách sử dụng thư viện như axios.

Lưu ý rằng việc kết nối React với Node.js yêu cầu bạn hiểu về cách làm việc của máy chủ Node.js, cách xử lý yêu cầu và trả về dữ liệu từ phía máy chủ.

Dưới đây là một ví dụ cụ thể về cách kết nối ReactJS với máy chủ Node.js bằng việc tạo một ứng dụng đơn giản để hiển thị danh sách người dùng từ máy chủ:

Máy chủ Node.js:

Chúng ta sẽ tạo một máy chủ Node.js đơn giản sử dụng Express.js để cung cấp danh sách người dùng dưới dạng JSON:

javascript

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

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

app.get('/data', (req, res) => {
  res.json(users);
});

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

Frontend React:

Tiếp theo, chúng ta sẽ tạo một ứng dụng React để hiển thị danh sách người dùng từ máy chủ Node.js:

jsx

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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Gửi yêu cầu GET đến máy chủ Node.js để lấy danh sách người dùng
    axios.get('http://localhost:3001/data')
      .then(response => {
        setUsers(response.data);
      })
      .catch(error => {
        console.error('Error fetching users:', error);
      });
  }, []);

  return (
    <div>
      <h1>User List from Node.js Server</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Trong ví dụ này, chúng ta sử dụng thư viện axios để thực hiện yêu cầu GET tới máy chủ Node.js để lấy danh sách người dùng. Dữ liệu JSON trả về từ máy chủ sau đó được sử dụng để hiển thị danh sách người dùng trong ứng dụng React. Trên đây là giới thiệu về kết nối react js với server nodejs.

Leave a Comment Cancel Reply