Jason Chen Jason Chen - 1 year ago 272
React JSX Question

Using React with ejs?

I have a front-end that is built using React states that is meant to adapt based on user action. However, my front-end React is also meant to show and allow manipulation of my server-side data. Currently my view engine is EJS, and I am using it to display data. As a broad example:

return (<div class="col-md-6 col-sm-6 col-xs-7">
<li><span class="point">Name:</span> <%= user.profile.name %> </li>
<li><span class="point">Email:</span> <%= user.email %> </li>

I have established that I cannot mix these ejs
tags with React. This makes manipulating the data a challenge. Unless I redo my UI in jQuery, I'm not sure how to proceed.

I have looked at this React documentation for passing data, but upon testing it the result does not allow me to make cross-origin calls, and my MongoDB is stored on MongoLab. Thus, I am relegated to using EJS to call my data.

With the restrictions of using React with EJS, I am puzzled over what solutions I have to implement a UI tool like React with server-side data.

Answer Source

In express:

res.render('view', {user: myUser});

In EJS before the app's js bundle:

<script type='text/javascript'>
  var userFromServer =<%-JSON.stringify(user)%>

Use userFromServer in your react code.