React Spark

An extension of Laravel Spark to create Spark projects with React JS.

• Provides a blade template for you to extend and create your app using React rather than the incumbant Vue framework.

• Removes boiler plate dependancies that Spark requires.

• Common Nav Bar components work without requiring Bootstrap or Vue frameworks.

• A custom build script that:

  • Separates common dependancies to reduce file sizes
  • Attaches unique string to each filename to optimise caching

• Spark Core untouched to ensure no future upgrade conflicts

  This does not replace vue components in the Spark core.

What does this do?

This extension separates your project into 2 modules. The Spark Core remains as is working with Blade templates, Bootstrap front-end framework and Vue components. Your project will look like it's part of the Spark Core but it will use a separate Blade template which only uses Bootstrap styling and React javascript Library.

Installation

Require the nsearle/react-spark package in your composer.json and update your dependencies.

composer require nsearle/react-spark

Install npm modules with dependancies

npm install react-spark-js

Add the ReactSpark\ServiceProvider to your config/app.php providers array:

'nsearle\ReactSpark\ReactSparkServiceProvider'

Finally, publish files into resources.

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

Upgrading

Update the nsearle/react-spark package.

composer update nsearle/react-spark

Then update the npm modules

npm update react-spark-js

Creating your app

Start creating your React app inside

resources\assets\js\

Include your React Components into

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

You can safely edit Blade 'sections' here

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

Next, add the following to your app blade files. This will include your JS bundle and the Spark nav bar.

@extends('react-spark.reactApp')

Building your app

To build your app for development:

php artisan react-spark:build

To build your app for production

php artisan react-spark:build --production

To "watch" for file changes whilst your creating your app

php artisan react-spark:build watch

php artisan react-spark:build watch --production

Using Redux

First, add your reducers in resources\assets\js\reactApp\reducers.js

Access the store dispatch method by adding the following statement after your component.

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

Then format your constructor as follows

constructor(props,context) {

    super(props,context);

}

You can now access the store dispatch method as follows

this.context.store.dispatch(YOUR_ACTION);

To access your store add the dependancy

import {connect} from 'react-redux';

Then add the following code after your component

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);

You can now access your store through props

this.props.YOUR_STORE;

License

Released under the MIT License, see LICENSE.