How to pass data in server side rendering to reactjs component from node

Question

I am very new to reactJs and just started to learn the features of reactJS. I am trying to figure out a way to pass the value from nodeJS to reactJS via server side rendering concept.

In the below example, I was able to define a react component and add it in server and render it in UI but I am not sure how to pass the data to the component that can be used inside the component render function.

client.js

var React=require('react');
var ReactDOM=require('react-dom');
var Component=require('./Component.jsx');


ReactDOM.render(
    React.createElement(Component),document
);

Component.jsx

var React=require('react'),
Request=require('superagent')


module.exports = React.createClass({
getInitialState: function () {
    return {

    };
  },
  componentWillMount: function () {

  },

  componentDidMount: function() {
    clearInterval(this.intervalID)
  },

  _handleClick: function () {
    alert('You clicked!')
  },

    render:function(){
    return(
        <html>
        <head>
            <title> ReactJS - demo </title>
            <link rel='stylesheet' href='/style.css'/>
        </head>
        <body>
        <div>
            <h1>react js testing</h1>
            <p>This is so cool</p>
            <button onClick={this._handleClick}>Click Me!</button>
        </div>
        <script src='/bundle.js'/>
        </body>
        </html>
        );
    }

});

Server.js

require('babel-register')({
    presets:['react']
});
var express = require('express');
var app=express();
var React=require('react');
var ReactDOMServer=require('react-dom/server');
var Component=require('./Component.jsx');

app.use(express.static('public'));
app.get('/',function(request,response){
    var html=ReactDOMServer.renderToString(
        React.createElement(Component)
    )
    response.send(html)
});

var PORT=4444;
app.listen(PORT,function(){
    console.log("Node js listening in port:"+ PORT);
})

Update 1:

I am now able to pass the value to the server side rendered component as below

React.createElement(Component,{object:...})

Now the server side setup works fine.

I need to make this {object:...} available in my client.js also for client side functionality to work. Any idea how to get this value in client.js?

Andrew Z · Accepted Answer · 2016-10-06 06:09:12Z

1

React.createElement
ReactElement createElement(
    string/ReactClass type,
    [object props],
    [children ...]
)

Create and return a new ReactElement of the given type. The type argument can be either an html tag name string (eg. 'div', 'span', etc), or a ReactClass (created via React.createClass).

In the your version in the

React.createElement(Component)

u need use something like

React.createElement(Component, {obj: obj, ...: ...})

answered Oct 6, 2016 at 6:09

Andrew Z

1394 bronze badges

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

1 Comment

Learner Over a year ago

This breaks client side interaction. What changes needs to be made in client.js to make the client side javascript work as well?

Collectives™ on Stack Overflow

How to pass data in server side rendering to reactjs component from node

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related