tystr/react-js-bundle

A bundle for integrating reactjs into symfony. Provides server-side rendering via the v8js php extension for isomorphic apps.

TystrReactJsBundle

, _(*1)

A bundle for integrating [React]0 into Symfony. Provides server-side rendering via the v8js PHP extension for building isomorphic applications., _(*2)

Installation

Install tystr/react-js-bundle with composer:, _(*3)

# composer.phar require tystr/react-js-bundle:dev-master:~0.1

Configuration

Register the bundle with your application:, _(*4)

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Tystr\ReactJsBundle\TystrReactJsBundle(),
        // ...
    );
}

Configure the paths to your react.js and components javascript files:, _(*5)

# app/config.yml

tystr_react_js:
    react_path: path/to/react.js
    components_path: path/to/components.js

By default, the v8js PHP extension is used to render the react components. If you would prefer to use an external server to render the react components, you may configure an external rendering method:, _(*6)

# app/config.yml

tystr_react_js:
    react_path: path/to/react.js
    components_path: path/to/components.js
    render_method: external
    render_url: http://localhost:3000

This will cause a GET request to be made to the render_url value with the component and data ({name: Tyler} in this case) in the url as query parameters:, _(*7)

GET http://localhost:3000?component=MyComponent&data=%7B%22name%22%3A%22Tyler%22%7D

Usage

{{ react_component('MyComponent', 'my-component') }}

This will render the react component MyComponent on the server-side and place it inside a div with the id my-component., _(*8)

To pass data to a component, pass a hash as the third argument:, _(*9)

{{ react_component('MyComponent', 'my-component', {'name': 'Tyler'}) }}

This makes this.props.name available in MyComponent., _(*10)

To mount all components rendered server-side with the react_component function, use the react_mount_components twig function:, _(*11)

<script>
    {{ react_mount_components() }}
</script>

To mount a single react component (as long as it's already rendered with react_component), use the react_mount_component function:, _(*12)

<script>
    {{ react_mount_component('MyComponent') }}
</script>

Attempting to mount a component whose markup has not been rendered will result in an exception Tystr\ReactJsBundle\Exception\ComponentNotRenderedException., _(*13)