darrenmerrett / react-spark by z5

React Spark
44
8
3
Package Data
Maintainer Username: z5
Maintainer Contact: darren.merrett@gmail.com (Darren Merrett)
Package Create Date: 2016-06-24
Package Last Update: 2016-11-10
Language: JavaScript
License: MIT
Last Refreshed: 2024-12-23 03:29:07
Package Statistics
Total Downloads: 44
Monthly Downloads: 0
Daily Downloads: 0
Total Stars: 8
Total Watchers: 3
Total Forks: 4
Total Open Issues: 1

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 darrenmerrett/react-spark package in your composer.json and update your dependencies.

composer require darrenmerrett/react-spark

Install npm modules with dependancies

npm install react-spark-js

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

'darrenmerrett\ReactSpark\ReactSparkServiceProvider'

Finally, publish files into resources.

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

Upgrading

Update the darrenmerrett/react-spark package.

composer update darrenmerrett/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.