React | Multiple render

Question

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...

i tried this i didnt work

HTML

<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>

JSX

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return (<h1>App</h1>);
  }
}
class Test extends React.Component {
  render () {
    return (<h1>Test</h1>);
  }
}

render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));

then when i load the page only prints the <h1>Test</h1>... why?

Are you using the dev version of React? If so, you should be getting some helpful errors in the console. — jmargolisvt, Sep 15 '16 at 19:35
You cannot do `return (
1

2
);` place them within a parent div, like `return (

1

2

);`, What do you see in the `developer console`? — Dhruv Kumar Jha, Sep 15 '16 at 19:45
You'd get an error message in the console. @Random User is totally right. — jmargolisvt, Sep 15 '16 at 19:53
I've done this successfully - Can't see what's wrong from looking at your code, are you able to make a Plunkr or CodePen that reproduces the issue? — Matt Holland, Sep 16 '16 at 17:20
@MattHolland look at this screenshots...html: http://prntscr.com/ciuip9 || jsx: http://prntscr.com/ciuj18 || browser: http://prntscr.com/ciujhq — Gil, Sep 16 '16 at 20:44
Is that your whole HTML document? I'm guessing a little here, but what if you have a "well formed" HTML page (With and tags)? — Matt Holland, Sep 16 '16 at 22:42
@MattHolland Yes, but i was testing with a simple code because with the real page it doesn't work... — Gil, Sep 18 '16 at 02:29

score 1 · Answer 1 · answered Sep 16 '16 at 06:18

1

You can create a new component and call from that.

import App from "./App";
import Test from "./Test";
class Program extends React.Component {
  render() {
    <div>
      <div id="app"><App /></div>
      <div id="test"><Test /></div>
    </div>
  }
}

and then call

render(<Program />), document.getElementById('...'));

answered Sep 16 '16 at 06:18

Ngọc Bạch Văn

94
3

is not what I need, I know it can be done that way but still do render a single div in my html...check my edit. – Gil Sep 16 '16 at 15:51

score 1 · Accepted Answer · edited May 23 '17 at 12:16

I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/

I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:

<div id="test"></div>
<div id="app"></div>

I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?

Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

(Make sure you're using the "dev" version of React to see these)

Thanks you! so its the self-closing in the html. – Gil Sep 19 '16 at 15:21 — Gil, Sep 19 '16 at 15:21

score 0 · Answer 3 · answered Jan 19 '17 at 02:26

We created a framework to do this with great success.

Have a look at React Habitat.

With it you can just register components eg:

container.register('SomeReactComponent', SomeReactComponent);

Then they auto resolve in the dom via:

<div data-component="SomeReactComponent"></div>

React | Multiple render

3 Answers3