README

一个小型库，帮助您通过集成React.js到全栈PHP框架来实现混合应用。

灵感来源于 react-rails 钥匙

入门

要将React集成到您喜欢的全栈MVC项目中，您需要做的所有事情是

npm install react 或 yarn add react
composer require sasab/react-bridge
在您的视图中某处调用react_component或rc函数
最后，将生成的文件添加到您的包或直接通过script标签添加到您的html中

如果您是 Laravel 用户，您可以直接开始使用它，默认情况下它使用Laravel的目录结构。

“捆绑”react.js 文件将在 /resources/assets/js 中生成，并且默认情况下将在 /resources/assets/js/components 文件夹中查找您的React组件文件。

此函数将根据 .env 文件检测您的应用程序环境，如果它在生产状态，它将只返回React所需的 <div id='my-component' data-props='{"foo":"bar"}'> 文件。如果它在开发状态，它将写入/附加到 react.js 文件。

您可以通过使用 .env 文件或将覆盖作为 react_component 函数的第三个参数来覆盖默认设置。

    // Data provided from the server that will be passed as props to your component
    $props = ['foo' => 'bar'];

    // Default options
    <?= react_component('my-component', $props, [
        'ref' => false,
        'component' => null,
        'path' => '/resources/assets/js',
        'folder' => 'components',
        'filename' => 'react'    
    ]) ?>
    
    // or in Laravel's blade

    {!! react_component('my-laravel-component', ['foo' => 'bar']) !!}

.env

REACT_BRIDGE_ENV=
REACT_BRIDGE_PATH=
REACT_BRIDGE_FOLDER=
REACT_BRIDGE_FILENAME=

选项

ref - 如果您将其设置为 true，则组件将在全局window对象上具有引用 window._components.MyComponent
component - 默认情况下，react_component 函数的第一个参数代表html的 id 属性，该属性将转换为组件的 StudlyCase 名称，并且函数将在 ../components/ 文件夹的根目录中查找实际的 React.jsx 组件文件。

如果您想要提供自定义名称或自定义路径或两者都提供，您可以将其作为此参数提供，例如。
```
react_component('my-component', $data, ['component' => 'Articles/Comments/SingleComment']);
```
也支持点表示法，因此您也可以这样编写
```
react_component('my-component', $data, ['component' => 'Articles.Comments.SingleComment']);
```
从 v1.1 开始，第一个参数可以是数组，因此您可以提供id和自定义component作为列表：
```
    react_component(['my-component', 'Articles.Comments.SingleComment'], $data);
```
path - 您捆绑文件将生成的基本路径
folder - 在 path 内部的文件夹名称，其中您的React.jsx组件将位于
filename - 您捆绑文件的名字

约定

react_component 的第一个参数期望一个 slug，它将是元素的 id，正如之前提到的，它将被转换为组件的 StudlyCase 名称，例如。

react_component('my-component');

如果组件的实际名称是一个文件夹，函数将在文件夹 /MyComponent/MyComponentContainer 中查找容器组件。您可以在这里了解更多关于这种React模式的信息

sasab / react-bridge

维护者

详细信息

README

入门

选项

约定