我想您可能还不知道如何将各个层组合在一起（不要担心--这需要一些时间来理解）。在您的情况下，您的服务器端（PHP）代码将执行所有数据库调用，并检索/修改您需要的任何数据（毕竟，您不希望在客户端看到您的数据库凭据！）。
为了从ReactJS前端显示或更改数据，您需要一种将这些意图传达给后端的方法;这可以通过在PHP代码库中创建REST端点来实现，然后需要从React JS代码调用REST端点（可以使用Axios、fetch或许多其他HTTP库来实现）。
下面是一个超级简单的例子，我从reddit上的/u/roboctocat抓取：https://www.reddit.com/r/reactjs/comments/8lb6u3/can_anyone_provide_me_a_basic_example_tutorial/
您的客户代码：

// index.jsx
class MyComponent extends React.Component {
    onClick() { 
        fetch("http://your-php-server/ping-pong.php")
            .then(res => res.json()) 
            .then((result) => { console.log(result); }) 
    }

    render() { 
        return ( 
            <button onClick={this.onClick} /> 
        ); 
    } 
}

和您的服务器代码：

// ping-pong.php
<?php
    header('Content-Type: application/json'); 
    echo json_encode(array('ping' => 'pong')); 
?>

试试这个

const getData()=>{
  //function to fetch data
  const handleData=()=>{
    axios.get('php file path')
      .then(response=>response.json())
      .then((data)=>console.log(data.json));{

    }
  }

  return(
  <>
      <button onClick={handleData}></button>
  </>
  );
} //end main

export default getData()

首先我建议你写你的php代码如下：

$conn = mysqli_connect($serverIP, $dbusername,$dbpassword,$dbname);
    if(mysqli_errno($conn)) {
     
     $connError = array(
         "status" => boolval(0),
         "error" => mysqli_errno($conn)
     );

     $error = json_encode($connError);

     die($error);
    }

现在，您可以从后端获得更好的响应来处理React。
然后在下一步中，您可以调用fetch API向后端发送请求并检查数据库连接：

useEffect(() => {
  fetch("https://your-server/connection.php")
    .then((response) => response.json())
    .then((res) => console.log(res));
}, []);

现在使用useEffect()钩子，您可以在每次页面加载时检查一次数据库连接。
此外，您还可以检查res的typeof是否为array，然后执行类似向用户显示错误消息的操作。
希望能帮上忙。

如果您对商业替代品持开放态度，lolaDB是一个很好的选择，可以连接到大多数主要的数据库，而不需要任何后端/API代码。

const data = await loladb.query.execute({
  queryId = "get-all-recent-orders"
})

// data = [{ "orderId" : 123, .... }]