{"id":2292,"date":"2024-06-10T21:02:41","date_gmt":"2024-06-11T01:02:41","guid":{"rendered":"https:\/\/saemas.com\/sitio_web\/?p=2292"},"modified":"2024-09-27T10:28:09","modified_gmt":"2024-09-27T14:28:09","slug":"react-cakephp-integrar-react-en-un-proyecto-cakephp","status":"publish","type":"post","link":"https:\/\/saemas.com\/sitio_web\/react-cakephp-integrar-react-en-un-proyecto-cakephp\/","title":{"rendered":"React – Cakephp: Integrar React en un proyecto Cakephp"},"content":{"rendered":"\n

En la carpeta \u00absrc\u00bb de Cakephp ejecutar:<\/p>\n\n\n\n

npm create vite@latest nombre-de-la-aplicacion — –template react<\/p>\n\n\n\n

cd nombre_del_proyecto_react<\/code><\/pre>\n\n\n\n
Hacer los siguientes cambios en la l\u00ednea del package.json del proyecto react reci\u00e9n creado, donde se invoca a \u00abreact-script build\u00bb<\/p>\n\n\n\n
\"build\": \"react-scripts build && rm -rf \/opt\/lampp\/htdocs\/nombre_del_proyecto_cakephp\/webroot\/build && cp -rv build \/opt\/lampp\/htdocs\/sistemasangabriel\/webroot\"<\/code><\/pre>\n\n\n\n
Guardar el archivo package.json<\/p>\n\n\n\n
Posicionado en la carpeta del nuevo proyecto react proceder a crear los componentes en los m\u00f3dulos: Index.js, Index.css, App.js y App.css<\/p>\n\n\n\n
Una vez que se codificado el componente ejecutar:<\/p>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n
Para compilar la carpeta de producci\u00f3n<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
Agregar en el encabezado del controlador de Cakephp donde se desee insertar el componente el siguiente c\u00f3digo:<\/p>\n\n\n\n
use Cake\\Filesystem\\File; <\/p>\n\n\n\n
Despu\u00e9s crear una acci\u00f3n en el controlador donde se quiere insertar el componente y agregar este c\u00f3digo en esa acci\u00f3n:<\/p>\n\n\n\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'));<\/code><\/pre>\n\n\n\n
Crear el respectivo archivo \u00ab.ctp\u00bb en los templates del proyecto y agregar el siguiente c\u00f3digo<\/p>\n\n\n\n
<?php
use Cake\\Routing\\Router; 
$this->Html->css($css, [
'block' => true,
]); ?>
<div id=\"root\"><\/div>
<?=$this->Html->script($js); ?><\/code><\/pre>\n\n\n\n
Ejecutar el proyecto Cakephp en el navegador y posicionarse en la ruta de la acci\u00f3n que se cre\u00f3<\/p>\n\n\n\n
Listo !<\/p>\n\n\n\n
Fuente:<\/p>\n\n\n\n
\n
CakePHP and React: Building Single-Page Applications<\/a><\/blockquote>