Using React with ejs?

Question

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

    <ul>

      <li><span class="point">Name:</span> <%= user.profile.name %> </li>

      <li><span class="point">Email:</span> <%= user.email %> </li>

    </ul>

  </div>);

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 1

In express:

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

In EJS before the app's js bundle:

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

Use userFromServer in your react code.

Using React with ejs?

Sign up