Laravel ReactJS

This is a package that we wrote to use on our Laravel applications that use React from Facebook. Our goal is deal with the SEO problem that JavaScript based applications have and make easier to send data from back-end to JavaScript without making more requests.

The project that motivated this package wasn't a SPA and React wasn't used on all pages. It help us to keep the code of our views clean.

Attention: this package is on development state, so... be careful ;)

We based our code on this package from Facebook.

Requirements

• PHP 5.4+;
• Laravel 4.1+;
• v8js extension;

Installing

Add the dependency on your composer.json:

{
    [...]
    "require": {
        "sigep/laravel-reactjs": "*",
    },
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/cohros/laravel-reactjs"
        }
    ],
}

Configure the service provider and alias on your application config (/app/config/app.php)

return array (
    [...],
    'providers' => array (
        [...],
        'Sigep\LaravelReactJS\ReactJSServiceProvider',
    ),
    'alias' => array (
        [...],
        'ReactJS' => 'Sigep\LaravelReactJS\ReactJSFacade',
    )
);

Usage

You have two options here. Use the first (A) when you want to provide your source files without any kind of dependency management system. The second (B) was tested with Browserify, tool that we use, but we want to test with others too.

Separated files (A)

You have to configure just two things on this approach. react_src: path to react source file; src_files: array with all your source files. Keep in mind that all files will be included in the order that you declare it.

Using with browserify (B)

You probably will use three configs: src_files: path to your bundle; react_prefix: probably you will use the standalone option of browserify and exports a variable (named Application, for example). You need to pass that variable name in react_prefix config. Look on examples directory to see how we do this; components_prefix: like the above rule, that is a prefix to your components. Can be the same as the react_prefix, but we keep it separated like:

module.exports = {
    libs: {
        React: require('react')
    },
    components: {
        MyComponent: require('mycomponent')
    }
}

Getting the markup

With ReactJS you can get the html code that React generates when you ask it to render some component. What will happens here is: ReactJS will use the v8 engine to run your code and get the html markup of your component. You will put the result on your page and the client (let's say google) will get the content without have to run any JavaScript code.

First you have to define the component that will be used:

ReactJS::component('ComponentName');

If you need to pass props to your component, use the data method:

ReactJS::data(['prop_a' => 'value a', 'prop_b' => 'value_b']);

Now you just have to call the markup method to get the html code:

ReactJS::markup();

Tip: If you need to render several times the same component, the component method doesn't need to be called multiple times:

ReactJS::component('Foo');

ReactJS::data(['xpto' => '100']);
echo ReactJS::markup();

ReactJS::data(['xpto' => '200']);
echo ReactJS::markup();
[...]

Getting the JavaScript code

You need to tell React to render you component to the events and data-bidings work properly on the client browser. The js method will generate the necessary code to do that:

ReactJS::component('Foo');
ReactJS::data(['xpto' => '100']);

echo ReactJS::js('#target-element');

Note that if the server-rendering fails, the code on front-end will create the elements normaly, so if something goes wrong on the server, the page will have the components.

API

Configs

Change Log

[1.0.2] - 2015-03-23

• Support for react 0.13 API changes

Written with StackEdit.