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