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.

Niggard

Do you have node.js backend? – Mylesmylitta

I have an express environment set up. – Niggard

This makes no sense. React already does templating through the JSX {...} notation, why do you needs templating on top of that? Take a half hour to run through facebook.github.io/react/docs/tutorial.html, which is well worth your time, so that you understand how "client vs server" isn't a distinction React should be concerned with. You make React build the UI. Not some other templating engine. – Refurbish

It makes sense if you want to incrementally add React to an existing, large project that uses EJS (which React uses as a selling point). – Sepulchral

It also makes sense if you are implementing generators and need templatized react components. – Doormat

No one said how you would properly use React without EJS, and I'm trying to figure it out. I assume you'd need to rework your server calls from the client so that the client gets the react template info rather than the whole rendered page, right? – Byron

I get it now. if anyone wants an explanation, comment or msg me – Byron

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.

Mylesmylitta

i use this code var { Text2Speech } = <% - require('better-node-gtts') %> but it's throw error, can you help – Firmament

Answer 2

If ur using express then that would be obvious your entry point would be something like app.ejs; To have a react component you would need to change the extension to app.jsx as an entry point, It worked for me...

Perspicacious

Answer 3

you can use react with babel.js without webpack .but it may not be a good solution. but it works

<script src="//unpkg.com/react@16/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- for imported scripts -->
<script src="//unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app"></div>
<script type="text/babel">
 const { React, ReactDOM } = window;
 function App(){
   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>)
 }
 ReactDOM.render(<App/>, document.getElementById('app'));
</script>

Colicweed