README

react-laravel

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

安装

V8js 依赖项

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

您可以在此处了解如何安装它： 如何安装 v8js。

Composer

将您的 composer.json 中的 minimum-stability 设置为 dev，添加以下内容

  "minimum-stability": "dev"

然后运行

  $ composer require talyssonoc/react-laravel:0.11

之后，您应该将以下内容添加到您的 Laravel 应用程序的 config/app.php 文件中的提供者部分

  '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 的启发。