darrenmerrett/react-spark

React Spark

React Spark

An extension of Laravel Spark to create Spark projects with React JS., _(*1)

• 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, _(*2)

  This does not replace vue components in the Spark core., _(*3)

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., _(*4)

Installation

Require the darrenmerrett/react-spark package in your composer.json and update your dependencies., _(*5)

composer require darrenmerrett/react-spark

Install npm modules with dependancies, _(*6)

npm install react-spark-js

Add the ReactSpark\ServiceProvider to your config/app.php providers array:, _(*7)

'darrenmerrett\ReactSpark\ReactSparkServiceProvider'

Finally, publish files into resources., _(*8)

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

Upgrading

Update the darrenmerrett/react-spark package., _(*9)

composer update darrenmerrett/react-spark

Then update the npm modules, _(*10)

npm update react-spark-js

Creating your app

Start creating your React app inside, _(*11)

resources\assets\js\

Include your React Components into, _(*12)

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

You can safely edit Blade 'sections' here, _(*13)

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., _(*14)

@extends('react-spark.reactApp')

Building your app

To build your app for development:, _(*15)

php artisan react-spark:build

To build your app for production, _(*16)

php artisan react-spark:build --production

To "watch" for file changes whilst your creating your app, _(*17)

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, _(*18)

Access the store dispatch method by adding the following statement after your component., _(*19)

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

Then format your constructor as follows, _(*20)

constructor(props,context) {

    super(props,context);

}

You can now access the store dispatch method as follows, _(*21)

this.context.store.dispatch(YOUR_ACTION);

To access your store add the dependancy, _(*22)

import {connect} from 'react-redux';

Then add the following code after your component, _(*23)

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, _(*24)

this.props.YOUR_STORE;

License

Released under the MIT License, see LICENSE., _(*25)