How to render react component without ReactDOM.render function?

Question

Is it possible to render the react component just by referencing it with its name. For example:

<div>
   <MyComponent/>
</div>

All the illustrations and tutorials I have seen, they use ReactDOM.render function to render the component to the target HTML element. But what if I want to repeat the rendering of the component based on server data like this:

<div>
   <?php foreach($items as $item):?>
      <MyComponent passedData="<?=$item['name'];?>"/>
  <?php endforeach;?>
</div>

I know I can use componentWillMount method to request the data from a web service and then render the desired HTML but my application is not in this model (does not use web services). The data gets passed from controller to view and view will render the component n number of times based items count queried from database.

Is that possible?

PS: I am new to react and this is my application in react so apologies if I have missed something in tutorials and documentation.

Thanks.

NB: Vue can do this without server side rendering by now. Maybe the answer should be updated? — Olle Härstedt
– Olle Härstedt, Commented Dec 21, 2020 at 21:44

Jonathan Dion · Accepted Answer · 2017-04-22 11:08:22Z

1

This is server-side rendering. If you'are using PHP you can use react-php-v8j.

v8js is required on your server.

answered Apr 22, 2017 at 11:08

Jonathan Dion

1,67011 silver badges18 bronze badges

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

2 Comments

Hammad Over a year ago

Thanks @jonathandion

Olle Härstedt Over a year ago

Vue can do this with vue-cli-service and wc target (web component). Is anything similar supported by React by now?

Collectives™ on Stack Overflow

How to render react component without ReactDOM.render function?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related