React.js

Table of contents

  1. Overview
  2. Vite Setup
  3. File Structure & Naming


1. Overview Table of Contents

This framework natively supports React.js views along with any supporting components and utilities.

Goals & Architecture

  • Goal:
    • richer, interactive UI via React while keeping your PHP framework’s routing, ACL, validation, and controllers.
    • Support this feature natively so user does no have to spend time setting up React.
    • Support an environment where PHP and React views coexist within the same project.
  • Architecture:
    • PHP renders a host <div id="app" data-component="Home" data-props="…">
    • A single Vite entry (app.jsx) dynamically imports pages using import.meta.glob
    • Controller helper renderJsx('area.Page', $props) chooses which React page to mount


2. Vite Setup Table of Contents

All npm packages needed for React are automatically installed when you create a new project.

Production: build with npm run build and use your PHP helper (Vite::tags(...)) to load hashed assets from public/build/manifest.json.


3. File Structure & Naming Table of Contents

  • Pages: resources/js/pages/<area>/<Page>.jsx
  • PHP can pass names like home.index, home/Index, or admin/Users.index.
  • Components: resources/js/components/*
  • Utils: resources/js/utils/*
  • Core package (vendor): vendor/chappy-php/chappy-php-framework/src/React/* (reusable helpers/components)