PHPackages darrenmerrett/react-spark - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. darrenmerrett/react-spark ActiveLibrary[Utility & Helpers](/categories/utility) darrenmerrett/react-spark ========================= React Spark v0.1.10(9y ago)8444[1 issues](https://github.com/darrenmerrett/react-spark/issues)MITJavaScriptPHP >=5.6.4 Since Jun 26Pushed 9y ago3 watchersCompare [ Source](https://github.com/darrenmerrett/react-spark)[ Packagist](https://packagist.org/packages/darrenmerrett/react-spark)[ RSS](/packages/darrenmerrett-react-spark/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependencies (1)Versions (11)Used By (0) React Spark =========== [](#react-spark) An extension of [Laravel Spark](https://spark.laravel.com) to create Spark projects with [React JS](https://facebook.github.io/react/). - 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? ------------------ [](#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 ------------ [](#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 --------- [](#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 ----------------- [](#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 ----------------- [](#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 ----------- [](#using-redux) First, add your [reducers](http://redux.js.org/docs/basics/Reducers.html) 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 ------- [](#license) Released under the MIT License, see LICENSE. ### Health Score 27 — LowBetter than 47% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community13 Small or concentrated contributor base Maturity54 Maturing project, gaining track record Bus Factor1 Top contributor holds 94.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~15 days Recently: every ~33 days Total 10 Last Release 3518d ago PHP version history (2 changes)v0.1.1PHP >=5.4.0 v0.1.10PHP >=5.6.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/2114895?v=4)[Zhang Lin](/maintainers/z5)[@z5](https://github.com/z5) --- Top Contributors [![darrenmerrett](https://avatars.githubusercontent.com/u/6872285?v=4)](https://github.com/darrenmerrett "darrenmerrett (18 commits)")[![obaid](https://avatars.githubusercontent.com/u/12336?v=4)](https://github.com/obaid "obaid (1 commits)") --- Tags laravelreactspark ### Embed Badge ![Health badge](/badges/darrenmerrett-react-spark/health.svg) ``` [![Health](https://phpackages.com/badges/darrenmerrett-react-spark/health.svg)](https://phpackages.com/packages/darrenmerrett-react-spark) ``` ### Alternatives [markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 17818.7k](/packages/markwalet-nova-modal-response)[nickurt/laravel-akismet Akismet for Laravel 11.x/12.x/13.x 98145.2k3](/packages/nickurt-laravel-akismet)[creasi/laravel-nusa A Laravel package that aim to provide Indonesia' Administrative Data 997.7k2](/packages/creasi-laravel-nusa)[team-nifty-gmbh/tall-datatables Server-side rendered datatables for Laravel and Livewire 1319.7k3](/packages/team-nifty-gmbh-tall-datatables)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)