alexk/craft-react

CraftCMS 的客户端和服务器端 React 渲染

安装次数: 4,511

依赖者: 1

建议者: 0

安全: 0

星标: 43

关注者: 5

分支: 9

开放问题: 1

类型:craft-plugin

1.2.2 2019-03-24 16:56 UTC

This package is auto-updated.

Last update: 2024-09-25 06:43:31 UTC


README

Craft CMS React 渲染器允许你在 Craft CMS 项目中实现 React.js 的客户端和服务器端渲染。

它是 CraftCMS 的 ReactBundle 实现。有关核心功能、客户端示例以及与渲染器本身相关的问题的完整文档,请查看 ReactBundleSymfony React Sandbox

为什么选择服务器端渲染?

通过在服务器上渲染你的 React 组件,你不仅提高了性能和搜索引擎的可读性,从而提升了 SEO,还允许那些连接较慢的用户在客户端包完全加载之前访问你的信息。

工作原理

请查看 教程,了解此插件客户端和 twig 端的逐步解释。对于 JSON-API,我们推荐使用 Craft CMS 的 Elements API

安装

要安装插件,请按照以下说明操作

  1. 打开你的终端并进入你的 Craft 项目

     cd /path/to/project
    
  2. 然后告诉 Composer 加载插件

     composer require alexk/craft-react
    

在控制面板中,转到设置 → 插件,并为 Craft React 点击“安装”按钮。

设置

在插件设置中,添加以下条目

环境: "client_side","server_side" 或 "both"

服务器包: "PATH_TO_SERVER_BUNDLE"

或全局覆盖 config/react.php 中的设置

<?php

return [
    'env' => 'client_side',
    'serverBundle' => 'app/server-bundle.js',
];

在你的模板中,添加以下 TWIG 函数,你希望在其中渲染你的 React 应用程序的位置

    {{ react_component('MyApp', {'props': {entry: entry}}) }}

在 props 中,传递你想传递给根组件的任何 props。

序列化

为了将条目序列化以创建 store 或 props,引入了新的 twig 函数 serialize(entry, schema = 'entry', group = 'default') 。这允许你创建一个 PHP 文件来序列化你的条目。文件应位于 config/react 目录中,并命名为 [schema].php。如果未指定,则默认为 entry.php,组为 default

<?php
# config/react/entry.php

use craft\elements\Entry;

return [
    'default' => function(Entry $entry){// named after the group
        return [
            'id' => $entry->id,
            'title' => $entry->title,
            'customField' => $entry->customField,
         ];
    }
];

在 twig 中使用它,只需传递当前条目并在你的 store 中使用结果即可

{# _entry.twig #}

{% set serializedBlogPost = serialize(entry,'blog', 'detail') %}
{{ react_component('MyApp', {'props': {blogpost: serializedBlogPost}}) }}

这将使用 config/react/blog.php 文件

<?php
# config/react/blog.php

use craft\elements\Entry;

return [
    'detail' => function(Entry $entry){
        return [
            'id' => $entry->id,
            'title' => $entry->title,
            'content' => $entry->content,// custom field
         ];
    }
];