React – Cakephp: Integrar React en un proyecto Cakephp

En la carpeta «src» de Cakephp ejecutar:

npm create vite@latest nombre-de-la-aplicacion — –template react

cd nombre_del_proyecto_react

Hacer los siguientes cambios en la línea del package.json del proyecto react recién creado, donde se invoca a «react-script build»

"build": "react-scripts build && rm -rf /opt/lampp/htdocs/nombre_del_proyecto_cakephp/webroot/build && cp -rv build /opt/lampp/htdocs/sistemasangabriel/webroot"

Guardar el archivo package.json

Posicionado en la carpeta del nuevo proyecto react proceder a crear los componentes en los módulos: Index.js, Index.css, App.js y App.css

Una vez que se codificado el componente ejecutar:

npm start

Para compilar la carpeta de producción

npm run build

Agregar en el encabezado del controlador de Cakephp donde se desee insertar el componente el siguiente código:

use Cake\Filesystem\File;

Después crear una acción en el controlador donde se quiere insertar el componente y agregar este código en esa acción:

$filePath = WWW_ROOT . 'build/asset-manifest.json';
$file = new File($filePath);
 
$manifest = json_decode($file->read());
$file->close();
 
$maincss = 'main.css';
$mainjs = 'main.js';
 
$css = '/build' . $manifest->files->$maincss;
$js = '/build' . $manifest->files->$mainjs;
$this->set(compact('css', 'js'));

Crear el respectivo archivo «.ctp» en los templates del proyecto y agregar el siguiente código

<?php
use Cake\Routing\Router; 
$this->Html->css($css, [
'block' => true,
]); ?>
<div id="root"></div>
<?=$this->Html->script($js); ?>

Ejecutar el proyecto Cakephp en el navegador y posicionarse en la ruta de la acción que se creó

Listo !

Fuente:

CakePHP and React: Building Single-Page Applications

https://toggen.com.au/it-tips/embedding-reactjs-in-a-cakephp-view