2

I have just started to learn react JS .And so I just wanted to know whether we could render elements from multiple JS files into the root node in React JS ? If Yes then how & if no then why?

For example, I was trying to do this

In index.js


import React from 'react';

import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';

const x="one";
const y=<div><h2>Zero, {x}</h2><h1>{x=="one"?"two":"three"}</h1></div>
ReactDOM.render(y,document.getElementById('root'));

In one.js

import react from 'react';
import React from 'react';
import  ReactDOM  from 'react-dom';

const a="def";
const b="abc {a}";

ReactDOM.render(b,document.getElementById('root'));

But the output in the browser was just

Zero, one two

ItsRibhav
  • 25
  • 5
  • 1
    The entire React application is bootstrapped by injecting it into a dom node. You can have more than 1 React application on a page. You should go through their tutorial before anything else b/c many of the concepts are different than vanilla js dom manipulation. https://reactjs.org/tutorial/tutorial.html – Dov Rine Oct 10 '21 at 04:23
  • Also, it is important to realize that what looks like html in React is NOT html. It is actually javascript as JSX. This will cause all kinds of problems for you until you understand that. – Dov Rine Oct 10 '21 at 04:24
  • This is exactly what `ReactDOM.render` would do is that it takes the first argument and append it to the second argument so you can have the first argument as a combination of multiple elements I don't know what did you expected running the code above but the result you are getting is correct – Erfan Geramian Oct 10 '21 at 05:04

2 Answers2

1

The index.js serves as a root file where all the components are narrowed down to a single parent component (usually it's the App.js) which is then injected into the real DOM. Although you can't render multiple components into the root node because of how react works, it is, however, possible to render multiple components adjacent to the root node. This could be accomplished by using createPortal method on the ReactDOM object. Firstly, create adjacent nodes to the root nodes in index.html.

<div id='root'></div>
<div id='adjacent'></div>  <!-- Adjacent node to the root node by the id adjacent -->

Add the component to be rendered as an adjacent node in the root component (Typically App.js).
App.js

    export default function App(){
      return( 
    ReactDOM.createPortal(<ComponentToBeRenderedAdjacentToRootNode/>,document.getElementById('adjacent'));
    <ComponentToBeRenderedInRootNode/>
    )
    }

When you run the app and inspect the web page, the DOM structure will look something like this.
Browser HTML

<html>
 <head>
  ...
 </head>
 <body>
   <div id='root'> Root component and it's children components rendered here</div>
   <div id='adjacent'> ComponentToBeRenderedAdjacentToRootNode and it's children components rendered here</div>
 </body>
</html>
Prajwal Kulkarni
  • 1,480
  • 13
  • 22
-1

I was able to do this by creating two separate root rendering in the "adjacent" element from index.js using

const root = ReactDOM.createRoot(document.getElementById('root'));

const header = ReactDOM.createRoot(document.getElementById('header'));

and then render them separately using:

header.render(<something/>);

root.render(<App/>);

React documentation says there should be only one root, but this seems to work.

Yunnosch
  • 26,130
  • 9
  • 42
  • 54
Sigmani
  • 1
  • Please read https://stackoverflow.com/a/62062296/4826457 and https://github.com/facebook/react/issues/12700#issuecomment-410899830 – Suraj Rao Mar 03 '23 at 05:02
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 08 '23 at 08:38