react-laravel
With react-laravel
you'll be able to use ReactJS components right from your Blade views, with optional server-side rendering, and use them on the client-side with React due to unobtrusive JavaScript.
Installation
V8js dependency
It's important to know that react-laravel
has an indirect dependency of the v8js PHP extension.
You can see how to install it here: how to install v8js.
Composer
You just need to add this to your composer.json
's "require"
:
"talyssonoc/react-laravel": "0.10.2"
Also you got to set the minimum-stability
of your composer.json
to dev
, adding this:
"minimum-stability": "dev"
Then run:
$ composer update
After that you should add this to your providers at the config/app.php
file of your Laravel app:
'React\ReactServiceProvider'
And then run:
php artisan vendor:publish
And the react.php
file will be available at the config
folder of your app.
Usage
After the installation and configuration, you'll be able to use the @react_component
directive in your views.
The @react_component
directive accepts 3 arguments:
@react_component(<componentName>[, props, options])
//example
@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
// example using namespaced component
@react_component('Acme.Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
componentName
: Is the name of the global variable that holds your component. When using Namespaced Components you may use dot-notation for the component name.props
: Associative of theprops
that'll be passed to your componentoptions
: Associative array of options that you can pass to thereact-laravel
:prerender
: Tells react-laravel to render your component server-side, and then just mount it on the client-side. Default to true.tag
: The tag of the element that'll hold your component. Default to 'div'.- html attributes: Any other valid HTML attribute that will be added to the wrapper element of your component. Example:
'id' => 'my_component'
.
All your components should be inside public/js/components.js
(you can configure it, see below) and be global.
You must include react.js
and react_ujs.js
(in this order) in your view.
react-laravel
provides a ReactJS installation and the react_us.js
file, they'll be at public/vendor/react-laravel
folder after you install react-laravel
and run:
$ php artisan vendor:publish --force
For using the files provided by react-laravel
and your components.js
file, add this to your view:
<script src="{{ asset('vendor/react-laravel/react.js') }}"></script>
<script src="{{ asset('js/components.js') }}"></script>
<script src="{{ asset('vendor/react-laravel/react_ujs.js') }}"></script>
If you'll use a different version from the one provided by react-laravel (see composer.json
), you got to configure it (see bellow).
Configurations
You can change settings to react-laravel
at the config/react.php
file:
return [
'source' => 'path_for_react.js',
'components' => 'path_for_file_containing_your_components.js'
];
Both of then are optional.
source
: defaults topublic/vendor/react/laravel/react.js
.components
: defaults topublic/js/components.js
Your components.js
file should also be included at your view, and all your components must be at the window
object.
Thanks
This package is inspired at react-rails.