29. Kết Nối React JS Với PHP

Kết nối ReactJS với PHP cũng có thể thực hiện thông qua giao thức HTTP và việc sử dụng API. PHP thường được sử dụng để xây dựng các backend và API, trong khi ReactJS sẽ tạo giao diện người dùng cho phía frontend. 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 API bằng PHP:
- Sử dụng PHP để xây dựng các API để xử lý các yêu cầu từ phía React.
- Sử dụng các thư viện như Slim, Laminas, hoặc chỉ sử dụng các file PHP để xử lý yêu cầu và trả về dữ liệu dưới dạng JSON.
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 các API của PHP.
- Đối với ví dụ, tạo một component React để gửi yêu cầu và nhận dữ liệu từ backend:

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 API PHP để lấy dữ liệu
    axios.get('/api/data.php')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

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

export default App;

Xử lý dữ liệu ở backend PHP:
- 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 PHP để truy vấn cơ sở dữ liệu và thao tác dữ liệu.
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 backend PHP 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 PHP yêu cầu bạn hiểu về cách làm việc của API và cách cấu hình trong cả hai phía.

Dưới đây là một ví dụ cụ thể về cách kết nối ReactJS với backend PHP 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ừ backend:

Backend PHP:

Chúng ta sẽ tạo một tệp api/data.php để cung cấp danh sách người dùng dưới dạng JSON:

php

<?php
// Kết nối tới cơ sở dữ liệu (giả định)
$host = 'localhost';
$db = 'testdb';
$user = 'root';
$pass = '';
$conn = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);

// Truy vấn dữ liệu từ cơ sở dữ liệu
$query = $conn->query("SELECT * FROM users");
$data = $query->fetchAll(PDO::FETCH_ASSOC);

// Trả về dữ liệu dưới dạng JSON
header('Content-Type: application/json');
echo json_encode($data);

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ừ API PHP:

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 API PHP để lấy danh sách người dùng
    axios.get('/api/data.php')
      .then(response => {
        setUsers(response.data);
      })
      .catch(error => {
        console.error('Error fetching users:', error);
      });
  }, []);

  return (
    <div>
      <h1>User List from PHP Backend</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 API PHP để lấy danh sách người dùng. Dữ liệu JSON trả về từ API 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 PHP.

Leave a Comment Cancel Reply