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.

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. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 5, 2016 at 21:45
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). — Stephen Shank
– Stephen Shank, Commented Sep 6, 2019 at 14:59
It also makes sense if you are implementing generators and need templatized react components. — Ziggy
– Ziggy, Commented Mar 3, 2020 at 20:00

Igorsvee · Accepted Answer · 2016-09-05 21:39:23Z

16

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.

answered Sep 5, 2016 at 21:39

Igorsvee

4,2111 gold badge29 silver badges22 bronze badges

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

Comments

NandaSagar · Accepted Answer · 2022-03-20 23:40:06Z

1

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

answered Mar 20, 2022 at 23:40

NandaSagar

114 bronze badges

Comments

perona chan · Accepted Answer · 2023-05-10 07:54:25Z

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>

Collectives™ on Stack Overflow

Using React with ejs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related