I'm just learning React, and while I understand many of the basics there is one concept I haven't seen anyone cover: how do I take information loaded via the server-side language (e.g. PHP) and use it when loading up the React view?
I would have expected that I'd just have the
RenderDom
// In the pre-compiled JSX file
var Greeting = React.createClass({
render: function() {
<div>
<h1>Hello, { this.props.username }</h1>
</div>
}
});
// In my PHP view
<script type="text/jsx">
ReactDOM.render( <Greeting username="<?php echo $username; ?>"/>, document.body );
</script>
text/jsx
The React way would be to load in the data via a RESTful API.
However, you could look into serverside rendering of React components with PHP V8JS. Not sure how stable it is, but if, it would be a very good/better alternative to the AJAX call on the client. It would look somewhat like this:
// the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');
$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('MyComponent', array(
'any' => 1,
'props' => 2
)
);
/// ...
// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';
If you actually want to render this in the browser, you can use plain Javascript instead of JSX:
<?php $username = 'Eric Andre'; ?>
<script type="text/javascript">
ReactDOM.render(React.createElement(Greeting, { username: "<?php echo $username; ?>" }), document.body);
</script>
Another option would be to transform the JSX into plain Javascript with babel-browser and use <script type="text/babel">
. Keep in mind that babel-browser is not in active development anymore and also not intended for production use.
<?php $username = 'Eric Andre'; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script type="text/babel">
ReactDOM.render( <Greeting username="<?php echo $username; ?>"/>, document.body );
</script>