Project Structure

The project strucuture will look like this.

Example: Create a form in app.js with name input field and submit button linked to the php server and a result component to render output.

App.js

// 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 4: Start your PHP server inside PHP folder by going to console and change directory to PHP folder then run this command:

php -S localhost:8000

Now your PHP server is live on port 8000, now we will edit the server.php file:

Here, the header() this will allow our app running on localhost:3000 to access the data on it.

PHP

// 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 command in project directory:

npm start

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

Output on submitting the form

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.

Tags:

#Geeks-Premier-League-2022 #Geeks Premier League #Web Technologies

Project Setup

Project Structure

App.js

PHP

How to connect ReactJS as a front-end with PHP as a back-end ?

Similar Reads