How to pass server data into React component

Question

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?

Yeaaaah...but then I have to do an AJAX call after page load...seems kinda sad. — Pete
– Pete, Commented Nov 1, 2016 at 23:55
this.props.username will probably work. The script should be executed. Building an API backend might be preferred, but this should still work. — jOshT
– jOshT, Commented Nov 1, 2016 at 23:56

Arsen Kazydub · Accepted Answer · 2024-04-28 15:21:37Z

18

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.

edited Apr 28, 2024 at 15:21

answered Jun 10, 2019 at 19:26

Arsen Kazydub

5,6607 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Davrick Over a year ago

I've tried your first method. But it doesn't seem to be working with react hook. Any ideas why ?

Ryan Over a year ago

I used your approach (Method 1) but needed to change reactInit.username to window.reactInit.username. I appreciate it's not the 'React' way, but it does save an API call for my use case.

Fabian Schultz · Accepted Answer · 2016-11-02 01:13:01Z

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>

Derrick · Accepted Answer · 2016-11-03 05:50:28Z

1

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

answered Nov 3, 2016 at 5:50

Derrick

1,60612 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to pass server data into React component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related