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.
React JS
React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
PHP
The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is used for web development. It can be easily embedded with HTML files. HTML codes can also be written in a PHP file.
Prerequisite
Project Setup
Step 1: Create a React application using the following command:
npx create-react-app folderName
Step 2: After creating your project folder(i.e. folderName), move to it by using the following command:
cd folderName
Step 3: Create a folder named PHP in root to store server files there and create a server.php file.
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.jsimport { 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 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 $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
