About
ReactDOM.render 1) is the main function that renders an element into a DOM element.
It will be:
- the root element in a single page application
- or another react element called a secondary root, when you want to integrate react at several place in another HTML application (php, ruby,…)
Note that the rendering is updated when the state changes. See this page for more information about re-rendering: React - Rendering (Lifecycle) Mount and Unmount
Example
Javascript
In Native Javascript, you need to create the element of the virtual dom
- First node of the tree: An html react element that represents an heading2 with the React.createElement function.
// equivalent to `<h2>It is ...</h2>`
let h2 = React.createElement('h2', {key:2}, `It is ${new Date().toLocaleTimeString()}`);
- Second Node of the tree: A user element called also component (ie a function with a single object parameters called a props that returns an react element
let welcomeComponent = function (props) { return React.createElement(
'h1',
{key:props.key,className: 'greeting'},
`Hello, ${props.name}!`
);
};
- The root of the tree with its two children node
// equivalent to `<div><h1><h2> ...</h2></h1></div>`
let root = React.createElement('div',{},
[
welcomeComponent({key:1,name:"Foo"}), // the user component
h2 // the html element
]
);
// render
ReactDOM.render(root, document.getElementById('root'));
- The HTML
<div id="root">
<!-- called the "root" DOM node because the rendering of the root node is done inside -->
</div>
- Result:
When using jsx, the text and the javascript variable of the user component are split into two elements making potential update more granular
Jsx
jsx is a language that compiles to React Javascript and permits to create easily react element in an HTML declarative way.
Demo:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
<div id="root">
<!-- called the "root" DOM node because everything inside it will be managed by React DOM -->
</div>
Below React will modify only the time part
Note that the text It is is not modified as React split them in different element.
Multiple root
See the dedicated page