How To Use PHP and ReactJS To Build Modern Web Apps

Modern web applications are complex, and they require multiple technologies to deliver high-performance experiences to end users. One option for developers is to combine PHP, a mature server-side language, with ReactJS, a popular client-side library.

In this blog, I give an overview of PHP and ReactJS, describe the benefits and challenges of combining PHP and ReactJS together, and provide a step-by-step guide for how to use PHP and ReactJS to build a modern web application.

What Is PHP?

PHP started its journey in 1994 as a simple server-side web scripting language for displaying server-side data in an HTML page. 

Since its inception, PHP has evolved into a powerful tool for creating dynamic web applications. As a versatile, open-source language, PHP is known for its ease of use, flexibility, scalability, and its ability to integrate with nearly any other language or application.

While PHP has become a mature language, its strong community continues to innovate and modernize the language and the frameworks built on it. Due to these qualities, PHP continues to be a dominant force in web development, with approximately 75% of the known web reporting as using PHP.

What Is ReactJS?

In contrast to PHP being a server-side language, ReactJS, often referred to simply as React, is an open-source JavaScript library for building client-side user interfaces (UIs). 

React is specifically designed to facilitate the development of large, complex applications with data that changes over time. Due to its unidirectional data binding, the view dynamically updates as data changes while ensuring changes to child components do not affect their parents.

React makes building UIs simple by allowing developers to break down the UI into reusable components, improving performance by using a virtual DOM and providing a built-in router for creating single-page applications using declarative views or pages. Due to its efficient performance, declarative programming style, and the strong ecosystem of tools and libraries built around it, React has gained significant popularity.

Can PHP Work With ReactJS?

Absolutely, PHP and ReactJS can work together. While they are often compared to one another (PHP vs. React), they actually work very well together. It’s considered best practice to separate the concerns of server-side and client-side in this way. When using PHP and ReactJS together, it’s important to understand the web development stack and how these two interact with one another.

PHP typically runs server-side, handling tasks like server requests, database queries, and business logic. React, on the other hand, runs client-side within the user’s web browser, managing the UI and user interactions. Using PHP and ReactJS together allows a developer to separate the concerns of server-side and client-side, creating a more scalable and maintainable web application.

Benefits of Combining PHP and ReactJS

When looking at PHP vs ReactJS, it is clear that both have their own strengths for different portions of a web stack. PHP’s strengths are in server-side processing, while React’s are in building a responsive client-side UI and rich user experience (UX). 

Combining PHP and React leverages their respective strengths while simultaneously separating the concerns of server-side vs client-side development. PHP source code can be focused on data management and business logic, while React and JavaScript are focused on the UI and rich UX. This greatly improves performance, scalability, and source code tidiness and maintainability. Gone are the days of messy PHP view templates!

Challenges of Combining PHP and ReactJS

When looking at PHP vs. React, a few differences and challenges emerge. Due to React’s rigid best practices and recommendation of strict Node use, it can seem daunting to learn React and to figure out how to integrate React with PHP, since a Node (also server-side) environment is typically separate from PHP and writing in a Node structure won’t run properly on client-side without some finagling. However, there are many libraries that are targeted at exactly this issue.

Some frameworks, like Laravel, come with a webpack wrapper or asset compiler ready out of the box. Webpack, Vite, and other libraries simply compile your front-end Node application into code ready to be run by client-side. In the example below, we show how to setup and configure Laravel’s Laravel Mix module to compile our resources/js React files to public/js client-side JavaScript files. Symfony has its own asset manager and Vite can be used in other frameworks, like Laminas or Mezzio.

Free, On-Demand, and Instructor-Led PHP Training

Are you or your team looking to improve your PHP skills? Zend PHP training courses are designed for all levels, from beginners new to the language through experienced developers.

Explore PHP Training Options

How to Use PHP With React

Due to the nature of open-source web development and all the different frameworks and opinions out there, there are a myriad of different ways to use PHP with React. The most common way is to include React in the applications view, allowing it to manage the client-side UI and front-end routes, while PHP manages the server-side logic and back-end API routes. Combining a React application with an existing, standalone PHP API is as simple as calling the API within the React application to gather, display, and edit data. This is typically the recommended way, as it completely separates the concerns.

However, if you’d like to use Laminas, Mezzio, Laravel, or some other framework combined with React in one project to have it all in one place, that’s still easily possible. Simply start your PHP project with the framework of your choice, define a route for the root page or multiple routes (depending on how you’d like to architect it, either single page or MVC) with the page including React, define other PHP routes which will act as an API for React to speak with server-side logic, and begin building your front-end UI with React while managing business logic with PHP and its routes.

We’ll use Laravel with React as an example, since there’s a convenient plugin for integrating Javascript libraries into Laravel called Laravel Mix. In this example, we’re using individual React components inside Laravel templates, like one would typically use for an MVC pattern. You could also define one Laravel template with a React App starting point for React routes, pages, and components while reserving Laravel routes for API call definitions, or a mix of the two.

Step One

Initiate a new Laravel project with React ready.

$ composer create-project laravel/laravel react-example
$ cd react-example
$ npm install && npm install -D react react-dom

Step Two

From this point, developers typically put all the React application files under the resources/js directory, which we’ll do while telling Laravel Mix where to find them.

// resources/js/components/MyFirstComponent.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
export default function MyFirstComponent() {
  return (<h1>This is my first React Component!</h1>);
}
if (document.getElementById(‘MyFirstComponent’) {
  ReactDOM.render(<Hello React />, document.getElementById(‘MyFirstComponent’);
}
 
// resources/js/app.js
require(./bootstrap) // an arbitrary file representing any necessary initializations
require(‘./components/MyFirstComponent’)

Finally, configure Laravel Mix.

// webpack.mix.js
const mix = require(‘laravel-mix’)
Mix.js(‘resources/js/app.js’, ‘public/js’)
  .react()
  .extract([‘react’])
  .postCss(‘resources/css/app.css’, ‘public/css’, []);

That's all we need to do to kickstart the React portion of our application.

Step Three

Create a Laravel route and template for the home page.

<?php
// routes/web.php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::get(‘/’, function() {
  Return view(‘home’);
});

<!-- resources/views/home.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Example</title>
 
  <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
  <div id="MyFirstComponent"></div>
</body>
</html>

Step Four

The application can now be run, and you can see the output of our component, “My First Component!” 

From here, the architecture and use of PHP and React together is up to you. You could stick with one UI page in which all the client-side routes and pages are defined within React, and all the business logic and data is served as JSON from Laravel server-side routes which React can call. You could also build all your routes in Laravel with Laravel views that simply include React and components you’ve built for organizing UI development. That’s the beauty of open-source projects like PHP and React, they’re very flexible to fit many needs.

Final Thoughts

Combining PHP and ReactJS is an effective way to enhance the performance and functionality of your web application. PHP offers a solid server-side foundation, while ReactJS delivers excellent user experiences. By using these two technologies together, you can build a robust web app that bridges the backend-frontend technology gap.

However, as both PHP and ReactJS have active communities pushing ongoing development efforts, new versions and updates are released often. It is important to stay up to date on these versions to ensure your web app can access the most recent features, security patches, and other benefits.

Access Support and Services for PHP Web Apps

Zend PHP Long Term Support (LTS) and professional services take the stress out of PHP web app management. Take advantage of scheduled upgrades, continuous performance monitoring, and much more.

PHP LTS optionS   Professional Services

Additional Resources

• On-Demand Webinar - Developing Robust 12-Factor Web Applications: Best Practices and Strategies
• Free Training Course - Installing PHP
• Free Training Course - PHP Basics
• Blog - How to Configure Nginx for Drupal 10 and PHP-FPM
• Blog - Object-Oriented Programming Design Basics for PHP Apps
• Blog - How to Develop a WordPress Plugin
• Blog - A Developer's Guide to Building PHP APIs