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 react
oryarn add react
-
composer require sasab/react-bridge
-
Call the
react_component
orrc
function 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
true
your component will have have a reference on the global window objectwindow._components.MyComponent
-
component - by default the first parameter to the
react_component
function represents the htmlid
attribute which will be turned into theStudlyCase
name 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.1
first parameter can be an array, so you can provide theid
and the customcomponent
as 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