How to Connect ReactJS as a Front-end with PHP as a Back-end ?

Connecting the front end of React with the PHP backend is a classic approach to building a web application with the front end for the user interface and the back end or server side for handling databases, programming logic, and other operations.

In this article, we’ll discuss the steps required to connect React with a PHP backend using API endpoints, HTTP requests (GET and POST), and asynchronous data transfer methods like Ajax, Fetch, or Axios.

Prerequisite:

• Basic knowledge of PHP
• Understanding of React JS.
• NodeJS

Approach

To connect React with PHP, we'll use API endpoints and HTTP requests. Communication between the front end and back end will be handled through GET and POST requests. We will use asynchronous data transfer techniques, such as Ajax, Fetch, or Axios, to send and receive data between React and PHP.

Steps to Connect React with PHP

Step 1: Initialize React Project

Create a React application using the following command:

npx create-react-app folderName

Step 2: Move to the Project Directory

Once the project is created, navigate to the project directory using the following command:

cd folderName

Step 3: Setup PHP files

Now, you need to create the PHP files that will handle the server-side logic. Create a new folder named PHP in the root directory of your project. Inside the PHP folder, create a file named server.php.

Project Structure:

Step 4: Define React Component to Communicate

Next, you need to create a React component that will handle the user input and communicate with the PHP backend. For this example, we’ll create a simple form where a user can input their name, which will be sent to the PHP server. The server will then return a message, which will be displayed in the React app.

// Filename - 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 handleSubmit = (e) => {
        e.preventDefault();
        const form = $(e.target);
        $.ajax({
            type: "POST",
            url: form.attr("action"),
            data: form.serialize(),
            success(data) {
                setResult(data);
            },
        });
    };

    return (
        <div className="App">
            <form
                action="http://localhost:8000/server.php"
                method="post"
                onSubmit={(event) => handleSubmit(event)}
            >
                <label htmlFor="name">Name: </label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value={name}
                    onChange={(event) =>
                        handleChange(event)
                    }
                />
                <br />
                <button type="submit">Submit</button>
            </form>
            <h1>{result}</h1>
        </div>
    );
}

export default App;

Step 5: Install jQuery

Before using jQuery in your project, you must first install it. Run the following command in the project directory:

npm install jquery

This will install the jQuery library and make it available for use in your React application. Once installed, you can import it using:

import $ from "jquery";

Step 6: Start PHP Backend

Start your PHP server inside the PHP folder by going to the console and changing directory to the PHP folder, then run this command:

php -S localhost:8000

This will start the PHP server on localhost:8000.

Step 7: Create the PHP Server (server.php)

Now, you need to create the server.php file that will handle the data sent from React. The PHP file will accept the POST request and return a message.

// FileName - server.php

<?php
    header('Access-Control-Allow-Origin: http://localhost:3000');
    $user = $_POST['name'];
    echo ("Hello from server: $user");
?>

Steps to run the application: Now check your website by running the command in the project directory: 

npm start

Output: Now go to the browser window and type URL http://localhost:3000/

Conclusion

By following these steps, you can easily connect a React front end with a PHP backend. This method uses HTTP requests (GET and POST), along with asynchronous data transfer using Ajax, Fetch, or Axios. You’ve learned how to create a React component, handle form data, send it to the PHP backend, and display the server’s response in the React app.