README

Laravel Spark 的扩展，用于使用 React JS 创建 Spark 项目。

• 提供了一个 blade 模板，您可以扩展并使用 React 而不是现有的 Vue 框架来创建您的应用程序。

• 移除了 Spark 所需的样板依赖项。

• 常见的导航栏组件无需 Bootstrap 或 Vue 框架即可正常工作。

• 一个自定义构建脚本，

  • 将常见依赖项分离以减小文件大小
  • 将唯一字符串附加到每个文件名以优化缓存

• Spark 核心保持不变以确保未来升级无冲突

  这不会替换 Spark 核心中的 Vue 组件。

这有什么作用？

此扩展将您的项目分为 2 个模块。Spark 核心保持不变，与 Blade 模板、Bootstrap 前端框架和 Vue 组件一起工作。您的项目将看起来像是 Spark 核心的一部分，但它将使用单独的 Blade 模板，该模板仅使用 Bootstrap 样式和 React JavaScript 库。

安装

在您的 composer.json 中要求 darrenmerrett/react-spark 包，并更新您的依赖项。

composer require darrenmerrett/react-spark

使用依赖项安装 npm 模块

npm install react-spark-js

将 ReactSpark\ServiceProvider 添加到您的 config/app.php 提供者数组中

'darrenmerrett\ReactSpark\ReactSparkServiceProvider'

最后，将文件发布到资源中。

php artisan vendor:publish --provider="darrenmerrett\ReactSpark\ReactSparkServiceProvider"

升级

更新 darrenmerrett/react-spark 包。

composer update darrenmerrett/react-spark

然后更新 npm 模块

npm update react-spark-js

创建您的应用程序

在内部开始创建您的 React 应用程序

resources\assets\js\

将您的 React 组件包含在内

resources\assets\js\index.js i.e. require('./my-component.js');

您可以安全地在此处编辑 Blade '部分'

resources\views\react-spark\reactApp.blade.php

接下来，将以下内容添加到您的应用程序 blade 文件中。这将包括您的 JS 包和 Spark 导航栏。

@extends('react-spark.reactApp')

构建您的应用程序

为开发构建您的应用程序

php artisan react-spark:build

为生产构建您的应用程序

php artisan react-spark:build --production

在创建您的应用程序时“监视”文件更改

php artisan react-spark:build watch

php artisan react-spark:build watch --production

使用 Redux

首先，在 resources\assets\js\reactApp\reducers.js 中添加您的 reducers。

通过在组件后添加以下语句来访问 store dispatch 方法。

YourComponent.contextTypes = { store: React.PropTypes.object };

然后按照以下格式格式化您的构造函数

constructor(props,context) {

    super(props,context);

}

现在您可以按以下方式访问 store dispatch 方法

this.context.store.dispatch(YOUR_ACTION);

要访问您的存储，请添加依赖项

import {connect} from 'react-redux';

然后在组件后添加以下代码

function mapStateToProps(state) {

  return {
    YOUR_STORE: state.YOUR_STORE,
  };

}

function mapDispatchToProps(dispatch) {
  return {};
}

function mergeProps(stateProps, dispatchProps, ownProps) {

  return Object.assign({}, stateProps, ownProps);
}

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(YOUR_COMPONENT);

现在您可以通过 props 访问您的存储

this.props.YOUR_STORE;

许可证

在 MIT 许可证下发布，请参阅 LICENSE。