react-laravelを使用すると、オプションのサーバー側レンダリングを使用して、Blade ビューから ReactJS コンポーネントを直接使用でき、目立たない JavaScript により React を使用してクライアント側でコンポーネントを使用できるようになります。
react-laravelは v8js PHP 拡張機能の間接的な依存関係があることを知っておくことが重要です。
インストール方法は、v8js のインストール方法で確認できます。
これを追加して、 composer.jsonのminimum-stability devに設定します。
"最小安定性": "開発"
次に、次を実行します。
$コンポーザーにはtalyssonoc/react-laravelが必要です:0.11
その後、Laravel アプリのconfig/app.phpファイルでプロバイダーにこれを追加する必要があります。
「ReactReactサービスプロバイダー」
そして、次を実行します。
php アーティザン ベンダー:パブリッシュ
そして、 react.phpファイルはアプリのconfigフォルダーで利用できるようになります。
インストールと構成が完了すると、ビューで@react_componentディレクティブを使用できるようになります。
@react_componentディレクティブは 3 つの引数を受け入れます。
@react_component(<コンポーネント名>[, props, options]) //例
@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ]) // 名前空間コンポーネントを使用した例
@react_component('Acme.Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ]) componentName : コンポーネントを保持するグローバル変数の名前です。 名前空間コンポーネントを使用する場合、コンポーネント名にドット表記を使用できます。
props : コンポーネントに渡されるpropsの関連付け
options : react-laravelに渡すことができるオプションの連想配列:
prerender : コンポーネントをサーバー側でレンダリングし、それをクライアント側にマウントするようにreact-laravelに指示します。デフォルトはtrueです。
tag : コンポーネントを保持する要素のタグ。デフォルトは'div'です。
html 属性: コンポーネントのラッパー要素に追加されるその他の有効な HTML 属性。例: 'id' => 'my_component' 。
すべてのコンポーネントはpublic/js/components.js内にあり (構成可能です。以下を参照)、グローバルである必要があります。
ビューには、 react.js 、 react-dom.js 、 react_ujs.jsを (この順序で) 含める必要があります。 laravel-elixir を使用してこれらのファイルを連結できます。
react-laravel ReactJS インストールとreact_us.jsファイルを提供します。これらはreact-laravelインストールして実行すると、 public/vendor/react-laravelフォルダーに配置されます。
$ php 職人ベンダー:publish --force
react-laravelによって提供されるファイルとcomponents.jsファイルを使用するには、これをビューに追加します。
<script src="{{asset('vendor/react-laravel/react.js') }}"></script>
<script src="{{asset('vendor/react-laravel/react-dom.js') }}"></script>
<script src="{{asset('js/components.js') }}"></script>
<script src="{{asset('vendor/react-laravel/react_ujs.js') }}"></script> React-laravel によって提供されるバージョン ( composer.jsonを参照) とは異なるバージョンを使用する場合は、それを構成する必要があります (以下を参照)。
config/react.phpファイルで、 react-laravelの設定を変更できます。
return ['source' => 'path_for_react.js','dom-source' => 'path_for_react-dom.js','dom-server-source' => 'path_for_react-dom-server.js','components' => [ 'components.js を含むファイルのパス' ] ];
それらはすべてオプションです。
source : デフォルトはpublic/vendor/react-laravel/react.jsです。
dom-source : デフォルトはpublic/vendor/react-laravel/react-dom.jsです。
dom-server-source : デフォルトはpublic/vendor/react-laravel/react-dom-server.jsです。
components : デフォルトはpublic/js/components.jsです。ここでは複数のコンポーネント ファイルを指定できます。
components.jsファイルもビューに含める必要があり、すべてのコンポーネントがwindowオブジェクトに存在する必要があります。
このパッケージは、react-rails からインスピレーションを得ています。