PHPackages                             dconco/phpspa-react - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dconco/phpspa-react

ActiveProject[Utility & Helpers](/categories/utility)

dconco/phpspa-react
===================

Run React directly with PHP - No Node.js build step required for development

v0.0.1(1mo ago)20MITCSS

Since Apr 29Pushed 1mo agoCompare

[ Source](https://github.com/dconco/phpspa-react)[ Packagist](https://packagist.org/packages/dconco/phpspa-react)[ RSS](/packages/dconco-phpspa-react/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

PhpSPA React Template
=====================

[](#phpspa-react-template)

**Run React directly with PHP** - No Node.js build step required for development. This template combines React + TypeScript + Vite with PHP backend in a single project, running on the same host.

Installation
------------

[](#installation)

```
composer create-project dconco/phpspa-react project_name
```

Architecture
------------

[](#architecture)

This project runs **PHP and React on the same host** without CORS issues. PHP serves the HTML shell and can pass data directly to React components through the DOM.

### Project Structure

[](#project-structure)

```
phpspa-react/
├── app/              # PHP components (routes)
│   ├── layout.php    # HTML shell with #app div
│   ├── profile.php   # Example route with data
│   └── default.php   # Default route
├── public/
│   └── index.php     # Entry point
├── src/              # React components
│   └── App.tsx       # Main React app
├── config.php        # Vite/asset configuration
└── composer.json

```

PHP → React Data Passing
------------------------

[](#php--react-data-passing)

Each PHP route component can inject data into the HTML that React reads on mount. This is done using `` tags inside the `#app` div.

### How It Works

[](#how-it-works)

1. **PHP renders HTML** with embedded JSON data
2. **React mounts** and reads the JSON from the DOM
3. **React knows the route** and has the data to initialize state

### Example: Profile Route

[](#example-profile-route)

**PHP Component** (`app/profile.php`):

```