g3n1us/laravel-react-sync

Coordinate React frontends with a Laravel controller for updates and maintaining a universal frontend and backend application state

Laravel React Sync

, _(*1)

Make your React components and Laravel models play nicely!, _(*2)

Installation

Install using Composer:, _(*3)

composer require g3n1us/laravel-react-sync

Note: The next step will be unnecessary in most cases, _(*4)

If using Laravel 5.5 or later and autodiscovery is not disabled, the package will be discovered and ready to use automatically. If NOT, then add the service provider to the list of providers in config/app.php., _(*5)

'providers' => [
    /*
     * Application Service Providers...
     */
     G3n1us\LaravelReactSync\LaravelReactSyncServiceProvider::class,
]

Run react-sync Preset

If this you are installing the library on a fresh Laravel installation, run the preset Artisan command to complete installation, _(*6)

Note: If this is NOT a fresh installation, do no run this command. Instead, you can run php artisan vendor:publish to copy the necessary files into your resources directory., _(*7)

php artisan preset react-sync

Follow the onscreen instructions, and run:, _(*8)

npm install && npm run dev

Installation is complete!, _(*9)

Usage

ReactSync provides two base components to be used in the place of the standard React.Component. The first MasterComponent is hydrated with the Laravel view's data. This is set via an included Blade template in the top of your application's markup. The provides a global object that contains application data that maps to the data that is part of the context of the Blade view. Additionally, this object contains objects and methods that provide access to the underlying Laravel application's data, such as the Request, defined Guards, the Route and the authenticated user., _(*10)

This data can be used in components extending this class. Changes set via a traditional web form (or form fields) will mutate your state and trigger a render as you would expect in React., _(*11)

Alternately, the ReactSyncAppData.page_data object can be mutated manually to trigger a refresh, as this object is set as the components initial state., _(*12)

GH Pages URL https://g3n1us.github.io/laravel-react-sync/, _(*13)