I have an app and part of it is to login with twitter. After successfully logged in, I will usually pass the user data to the template by
app.get('/', function(req, res, next) {
log("The Home page has the user info: ", req.session.user);
res.render('pages/home', {
app: 'home',
user: req.session.user || ''
});
});
And then you can render the template based on the user data.
But in React, how should I pass such data to the component after logged in?
I am thinking of putting the data in the browser directly, but I am not confident about that.
<script type="javascript">
var user = #{user}
</script>
How do you think?? Thanks.
Usually you send the props you pass to the top level component to the client in a script tag.
So, you're doing <MyApp user={user} /> or MyApp({user: user}), you would create a script tag like this:
var code = "<script>var __react_preload_data = "
+ JSON.stringify({user: user})
+ ";</script>";
And on the client side:
React.renderComponent(MyApp(__react_preload_data), document.body);