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 this 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.

Development

Start the development server by running the following command:

npm run dev

Make sure the APP_ENV environment variable is set to local. If you are using the PHP standalone the APP_DOMAIN environment variable should be set to 'http://localhost:8000/'.

Pre-Production

Test your app in pre-production with the PHP standalone server by running the following command:

npm run build

Set the APP_ENV environment variable to production. Make sure the Vite server is not running. Your React.js views will now render without using the Vite server.

Production

When configuring your Apache or Nginx server make sure the APP_DOMAIN environment variable is set to /.


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)