https://github.com/bearsunday/bear.reactjsmodule

DEPRECATED
https://github.com/bearsunday/bear.reactjsmodule

deprecated

Last synced: about 2 months ago
JSON representation

DEPRECATED

• Host: GitHub
• URL: https://github.com/bearsunday/bear.reactjsmodule
• Owner: bearsunday
• License: mit
• Created: 2016-05-26T06:01:30.000Z (over 8 years ago)
• Default Branch: 1.x
• Last Pushed: 2017-01-26T18:57:59.000Z (about 8 years ago)
• Last Synced: 2024-05-02T19:16:16.508Z (9 months ago)
• Topics: deprecated
• Language: PHP
• Homepage:
• Size: 1.27 MB
• Stars: 5
• Watchers: 8
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# BEAR.ReactJsModule

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

## Prerequisites

 * php7

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

## Install

### Composer Install

```

composer require bear/reactjs-module

```

### Module Install

```php

$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 

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

To inject SSR renderer, Annotate `@Inject` with `@Named` annotation to `setRenderer` setter method

with `{ssr-app-name}` application name.

```php

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

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()`.

```php

render(['hello']);

return <<<"EOT"

    {$ssr->escape('title')}

{$view->markup}


{$view->js}

EOT;

```

Note: `app.bundle.js` is client javascript code. The page is rendered fully even {$markup} is removed by client JS code.

### VoidV8Module

It is possible to install `VoidV8Module` to run non V8Js environment for clien side rendering only.

```php

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

```