README

react-laravel

使用 react-laravel，你可以在 Blade 视图中直接使用 ReactJS 组件，可选的服务器端渲染，并利用无侵入式 JavaScript 在客户端使用 React。

安装

V8js 依赖

需要注意的是，react-laravel 间接依赖于 v8js PHP 扩展。

你可以在这里看到如何安装它：[如何安装 v8js](https://github.com/bitsoflove/react-laravel/blob/HEAD/install_v8js.md)。

Composer

你只需要将以下内容添加到你的 composer.json 文件的 "require" 部分：

  "talyssonoc/react-laravel": "0.11"

同时，你还需要将你的 composer.json 中的 minimum-stability 设置为 dev，添加以下内容：

  "minimum-stability": "dev"

然后运行：

  $ composer update

之后，你应该将以下内容添加到你的 Laravel 应用的 config/app.php 文件中的 providers 部分：

  'React\ReactServiceProvider'

然后运行：

  php artisan vendor:publish

然后 react.php 文件将出现在你的应用的 config 文件夹中。

使用

安装和配置完成后，你将能够在视图中使用 @react_component 指令。

@react_component 指令接受 3 个参数

  @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: 持有你的组件的全局变量的名称。当使用 命名空间组件 时，你可以使用点符号表示组件名称。
• 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 artisan vendor: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' => 'path_for_file_containing_your_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的启发。