117笔记问答PHP、Node.js 和 React 可以一起使用，以创建一个全栈应用程序。这里是一个简单的示例，说明如何将它们结合在一起：
- 创建 React 前端应用程序
首先，使用 create-react-app 脚手架创建一个新的 React 应用程序：
npx create-react-app my-frontend cd my-frontend npm start
这将创建一个名为 my-frontend 的新文件夹，其中包含 React 应用程序。运行 npm start 时，应用程序将在本地运行，默认端口为 3000。
- 创建 Node.js 后端服务器
接下来，创建一个新的 Node.js 项目并安装所需的依赖项：
mkdir my-backend cd my-backend npm init -y npm install express cors dotenv
在项目根目录下创建一个名为 .env 的文件，用于存储环境变量。例如，您可以添加以下内容：
PORT=3001 API_URL=http://localhost:3001
现在，创建一个名为 server.js 的文件，用于设置 Express 服务器：
const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
const PORT = process.env.PORT || 3001;
const API_URL = process.env.API_URL;
app.use(cors());
app.use(express.json());
// 在这里添加您的 API 路由
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from the backend!' });
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
运行 node server.js 以启动服务器。
- 将 React 前端与 Node.js 后端集成
现在，您需要将 React 前端与 Node.js 后端集成。在 React 应用程序中，您可以使用 fetch 或 axios 向后端 API 发送请求。例如，在 App.js 中：
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch(API_URL + '/api/data')
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
{data ? (
Data from backend:
{JSON.stringify(data, null, 2)}
) : (
Loading data...
)}
);
}
export default App;
在这个例子中，我们使用 fetch 向后端 API 发送请求，并在接收到数据后更新组件状态。
现在，当您运行 React 应用程序时，它将向后端服务器发送请求并显示从服务器获取的数据。
这就是一个简单的示例，展示了如何使用 PHP、Node.js 和 React 创建一个全栈应用程序。您可以根据需要扩展此示例，以适应您的项目需求。