Download the PHP package sasab/react-bridge without Composer
On this page you can find all versions of the php package sasab/react-bridge. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package react-bridge
React Bridge
A small library that helps you make hybrid apps by integrating React.js into full stack PHP frameworks.
Inspired by react-rails gem
Getting started
All you need to do to integrate React into your favorite full stack MVC project is:
-
npm install reactoryarn add react -
composer require sasab/react-bridge -
Call the
react_componentorrcfunction somewhere in your views - Finally, add the generated file(s) to your bundle or directly into your html via the script tag
If you are a Laravel user you can start using it out of the box, it uses Laravel's folder structure by default.
The "bundling" react.js file will be generated in /resources/assets/js and it will look for your React component files
in the /resources/assets/js/components folder by default.
This function will detect the environment of your app from the .env file, if it is in production it will just
return the <div id='my-component' data-props='{"foo":"bar"}'> file required by React. If it is in development it will write/append to the react.js file.
You can override the defaults by either using the .env file or providing the overrides as the third param to the react_component function.
.env:
Options
- ref - if you set it to
trueyour component will have have a reference on the global window objectwindow._components.MyComponent -
component - by default the first parameter to the
react_componentfunction represents the htmlidattribute which will be turned into theStudlyCasename of your component, and the function will look into the root of the../components/folder for your actual React.jsx component file.If you want to provide a custom name or a custom path or both you can provide it as this parameter e.g.:
Dot-notation is also supported so you can write it like this as well:
From
v1.1first parameter can be an array, so you can provide theidand the customcomponentas a list: : -
path - base path where your bundling file(s) will be generated
-
folder - folder name inside the path where your React.jsx components will be located
- filename - name of your bundling file(s)
Conventions
The first parameter to the react_component expects a slug that will be the id of the element which, as previously noted,
will be turned into the StudlyCase name of the component, e.g.:
react_component('my-component');
If the name of the component is actually a folder the function will look for a container component inside of the folder
/MyComponent/MyComponentContainer. You can read more about this React pattern here