From 0ce7fcb33055bb3a17df8fe3d73b717ad0008a0a Mon Sep 17 00:00:00 2001 From: webbrain-one <295484252+webbrain-one@users.noreply.github.com> Date: Wed, 5 Aug 2026 13:51:52 +0300 Subject: [PATCH] docs: add Spanish README --- README.es-ES.md | 107 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 README.es-ES.md diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..a078a92 --- /dev/null +++ b/README.es-ES.md @@ -0,0 +1,107 @@ + + +# Craft React + +El Renderizador React de Craft CMS te permite implementar el renderizado del lado del cliente y del servidor con React.js en tus proyectos de Craft CMS. + +Es una implementación de [ReactBundle](https://github.com/Limenius/ReactRenderer) para CraftCMS. Para obtener una documentación completa sobre la funcionalidad principal y los ejemplos del cliente, así como para consultar problemas relacionados con el renderizador en sí, visita [ReactBundle](https://github.com/Limenius/ReactRenderer) o [Symfony React Sandbox](https://github.com/Limenius/symfony-react-sandbox). + +## ¿Por qué renderizado del lado del servidor? +Al renderizar tus componentes de React en el servidor, no solo incrementas el rendimiento y la legibilidad para los motores de búsqueda (SEO), sino que también permites a los usuarios con conexiones más lentas acceder a tu información antes de que se haya cargado por completo tu paquete del cliente. + +## ¿Cómo funciona? +Consulta el [Recorrido paso a paso](https://github.com/Limenius/symfony-react-sandbox#walkthrough) para una explicación detallada de la parte del cliente y de Twig de este complemento. Para una API JSON, recomendamos [Elements API for Craft CMS](https://github.com/craftcms/element-api). + +## Instalación + +Para instalar el complemento, sigue estas instrucciones: +1. Abre tu terminal y ve a tu proyecto de Craft: + + cd /path/to/project + +2. Luego indica a Composer que cargue el complemento: + + composer require alexk/craft-react + +En el Panel de Control, ve a Configuración → Complementos y haz clic en el botón “Instalar” para Craft React. + +## Configuración + +En la configuración del complemento, añade las siguientes entradas: + +`Entorno: "client_side", "server_side" o "both"` + +`Paquete del Servidor: "RUTA_AL_PACOTE_DEL_SERVIDOR"` + +o anula la configuración globalmente en `config/react.php` + + +```php + 'client_side', + 'serverBundle' => 'app/server-bundle.js', +]; + +``` + + +En tu plantilla, añade la siguiente función de TWIG en el lugar donde quieras que se renderice tu aplicación de React: +```twig + {{ react_component('MyApp', {'props': {entry: entry}}) }} +``` + +En los props (propiedades), pasa las que desees transmitir a tu componente raíz. + + +## Serialización + +Para serializar tus entradas y crear un store (almacén) o props, se ha introducido la nueva función de twig `serialize(entry, schema = 'entry', group = 'default') `. Esto te permite crear un archivo PHP para serializar tus entradas. Los archivos deben ubicarse en `config/react` y nombrarse como `[schema].php`. +Si no se especifica, el esquema predeterminado será `entry.php` y el grupo `default`. + +```php entry.php + function(Entry $entry){// named after the group + return [ + 'id' => $entry->id, + 'title' => $entry->title, + 'customField' => $entry->customField, + ]; + } +]; +``` + +Para usarlo en twig, simplemente pasa tu entrada actual y utiliza el resultado en tu store: + +```twig +{# _entry.twig #} + +{% set serializedBlogPost = serialize(entry,'blog', 'detail') %} +{{ react_component('MyApp', {'props': {blogpost: serializedBlogPost}}) }} +``` + +Esto utilizará el archivo `config/react/blog.php` + +```php + function(Entry $entry){ + return [ + 'id' => $entry->id, + 'title' => $entry->title, + 'content' => $entry->content,// custom field + ]; + } +]; + +```