CODEWITHSUNDEEP
phpreactjs
Pete
Pete

Reputation: 7579

How to pass server data into React component

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 call in my php view, such as:

// 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>

But that doesn't work; nothing is displayed. I'm thinking that's because the text/jsx script area doesn't get executed...but of course if I remove that there's a syntax error.

Soo...I'm just wondering, what's the typical method for taking data loaded up from the DB and passing it into a React component?

Upvotes: 4

Views: 15110

Answers (3)

Arsen K.
Arsen K.

Reputation: 5660

Method 1: Global variable

PHP file:

<script>
    window.reactInit = {
        username: <?php echo $username; ?>
    };
</script>

React component:

function Greeting() {
    console.log(reactInit.username);
}

If you use Redux, you may find this method particularly useful. Because ANY of your reducers can access this global variable during the building of the initial state.

Method 2: data-* attributes

PHP file:

<div id="app" data-username="<?php echo $username; ?>"></div>

All data-* attributes are passed by using {...app.dataset}.

const app = document.getElementById('app');
const root = createRoot(app);
root.render(<Greeting {...app.dataset} />);

React component:

function Greeting(props) {
    console.log(props.username);
}

This method is not so flexible as the previous one, but seems to be more consistent with React philosophy.

P.S. Both methods were tested on React 18.

Upvotes: 18

Derrick
Derrick

Reputation: 1606

You could also take a look at https://github.com/erikras/react-redux-universal-hot-example for some examples on how to call RESTful APIs from a client.

Specifically it uses superagent to make the AJAX calls: https://github.com/visionmedia/superagent

Upvotes: 1

Fabian Schultz
Fabian Schultz

Reputation: 18556

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>

Upvotes: 3

Related Questions