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 からインスピレーションを得ています。