PHPackages                             bear/reactjs-module - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. bear/reactjs-module

ActiveLibrary[Utility & Helpers](/categories/utility)

bear/reactjs-module
===================

Redux React Serevr-Side Rendering using V8Js module for BEAR.Sunday

1.1.0(9y ago)5148MITPHPPHP >=7.1.0

Since May 30Pushed 9y ago6 watchersCompare

[ Source](https://github.com/bearsunday/BEAR.ReactJsModule)[ Packagist](https://packagist.org/packages/bear/reactjs-module)[ RSS](/packages/bear-reactjs-module/feed)WikiDiscussions 1.x Synced 4w ago

READMEChangelog (8)Dependencies (3)Versions (10)Used By (0)

BEAR.ReactJsModule
==================

[](#bearreactjsmodule)

**BEAR.ReactJsModule** is a `redux-react-ssr` which renders Redux React UI on the server-side support module for BEAR.Sunday.

Prerequisites
-------------

[](#prerequisites)

- php7
- [V8Js](http://php.net/v8js)

Install
-------

[](#install)

### Composer Install

[](#composer-install)

```
composer require bear/reactjs-module

```

### Module Install

[](#module-install)

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

In this canse, you need to place `ssr-app.bundle.js` at `$baseDir` directory.

### Redux UI Skeleton Install

[](#redux-ui-skeleton-install)

Copy skeleton directory to your BEAR.Sunday project root.

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

```

Install dependencies.

```
yarn install

```

Build ui application.

```
yarn run build

```

Three js bundled file is produced.

- react.bundle.js React library bundled code
- {app-name}.bundle.js Application bundled code for client side
- {ssr-app-name}.bundle.js Application bundled code for server side

You can include JavaScript client code (CSS, DOM ..) for `{app}.bundle.js` only. See more detail at the [example](https://github.com/bearsunday/BEAR.ReactJsModule/tree/1.x/docs/demo/ui/webpack.config.js#L7-L9).

### ResourceOjbect

[](#resourceojbect)

To inject SSR renderer, Annotate `@Inject` with `@Named` annotation to `setRenderer` setter method with `{ssr-app-name}` application 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;
    }
}

```

### Template

[](#template)

We need php template code. For exapmle, `Index.php` page resource needs `Index.html.php` template file. You can get the value of body by `escape()` or `raw()`.

```