README

BEAR.ReactJsModule 是一个 redux-react-ssr，它为 BEAR.Sunday 提供服务器端渲染 Redux React UI 的支持模块。

先决条件

php7
V8Js

安装

Composer 安装

composer require bear/reactjs-module

模块安装

$distDir = dirname(__DIR__, 2) . '/var/www/dist';
$this->install(new ReduxModule($distDir, 'ssr_app');

在这种情况下，您需要将 ssr-app.bundle.js 放置在 $baseDir 目录中。

Redux UI 骨架安装

将骨架目录复制到您的 BEAR.Sunday 项目根目录。

cp -r vendor/bear/reactjs-module/ui-skeleton/redux/ui .
cp vendor/bear/reactjs-module/ui-skeleton/redux/package.json .

安装依赖项。

yarn install

构建 UI 应用程序。

yarn run build

生成三个捆绑文件。

react.bundle.js React 库捆绑代码
{app-name}.bundle.js 客户端应用程序捆绑代码
{ssr-app-name}.bundle.js 服务器端应用程序捆绑代码

您只能包含 {app}.bundle.js 的 JavaScript 客户端代码（CSS、DOM 等）。更多详情请参阅示例。

ResourceOjbect

为了注入 SSR 渲染器，使用 @Named 注解将 @Inject 注入到 setRenderer 设置方法中，并使用 {ssr-app-name} 应用程序名称。

use BEAR\Resource\RenderInterface;
use BEAR\Resource\ResourceObject;
use Ray\Di\Di\Inject;
use Ray\Di\Di\Named;

class Greeting extends ResourceObject
{
    /**
     * @Inject
     * @Named("ssr_app")
     */
    public function setRenderer(RenderInterface $renderer)
    {
        $this->renderer = $renderer;
    }

    public function onGet()
    {
        $this->body = [
            'title' => 'Greeting',
            'hello' => ['message' => 'konichiwa']
        ];

        return $this;
    }
}

模板

我们需要 PHP 模板代码。例如，Index.php 页面资源需要 Index.html.php 模板文件。您可以通过 escape() 或 raw() 获取 body 的值。

<?php

/* @var $ssr \BEAR\ReactJsModule\Ssr */
$view = $ssr->render(['hello']);

return <<<"EOT"
<!doctype>
<html>
<head>
    <title>{$ssr->escape('title')}</title>
</head>
<body>
<div id="root">{$view->markup}</div>
<script src="build/react.bundle.js"></script>
<script src="build/app.bundle.js"></script>
<script>{$view->js}</script>
</body>
</html>
EOT;

注意：app.bundle.js 是客户端 JavaScript 代码。即使客户端 JavaScript 代码移除了 {$markup}，页面也会完全渲染。

VoidV8Module

可以安装 VoidV8Module 以仅针对客户端渲染运行非 V8Js 环境。

$this->install(new FakeV8Module(new ReduxModule($distDir, 'ssr_hello')));

bear / reactjs-module

维护者

详细信息