如何连接 ReactJS 作为前端和PHP作为后端？

ReactJS：它是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

PHP ：术语PHP是 Hypertext Preprocessor 的首字母缩写。它是一种用于 Web 开发的服务器端脚本语言。它可以很容易地嵌入到 HTML 文件中。 HTML 代码也可以写在PHP文件中。

在本文中，我们将学习如何连接 React 作为前端， PHP作为后端。

先决条件：

• PHP的基本知识。
• 对 ReactJS 的理解。
• 安装了 NodeJS。
• 已安装PHP 。

项目设置：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app folderName

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd folderName

第 3 步：在根目录下创建一个名为PHP的文件夹，用于存储服务器文件并创建一个服务器。 PHP文件。

项目结构：它看起来像这样。

实现：在各自的文件中写下代码。

App.js

import { useState } from "react";
import $ from "jquery";
import "./App.css";
  
function App() {
    const [name, setName] = useState("");
    const [result, setResult] = useState("");
  
    const handleChange = (e) => {
        setName(e.target.value);
    };
  
    const handleSumbit = (e) => {
        e.preventDefault();
        const form = $(e.target);
        $.ajax({
            type: "POST",
            url: form.attr("action"),
            data: form.serialize(),
            success(data) {
                setResult(data);
            },
        });
    };
  
    return (
        

            
 handleSumbit(event)}
            >
                Name: 
                 handleChange(event)}
                />
                

                Submit
            
            
{result}
        
    );
}
  
export default App;

上面代码的解释：创建状态（名称，结果），然后名为handleChange（）的函数处理输入的变化，最后函数handleSubmit（）将表单数据发送到服务器并接收传入的结果。

通过转到控制台并将目录更改为PHP文件夹，然后运行以下命令，在PHP文件夹中启动您的PHP服务器：

php -S localhost:8000

现在您的PHP服务器在端口 8000 上运行，现在我们将编辑服务器。 PHP文件：

上面代码的解释： header() 这将允许我们在 localhost:3000 上运行的应用程序访问它上面的数据。

现在通过在项目目录中运行命令来检查您的网站：

npm start

然后在浏览器的localhost:3000上检查您的网站，然后在输入字段中输入您的姓名，您将从服务器获得响应。

输出：现在转到浏览器窗口并输入 URL http://localhost:3000/

提交表单时的输出

输入名称并提交您将收到来自服务器的带有输入名称的消息