React Render HTML
React’s purpose is to render HTML in a variety of ways on a web page.
React renders HTML to a web page using the createRoot() function and the render() method.
The createRoot Function
The createRoot() function accepts a single argument, an HTML element.
The function’s purpose is to define the HTML element that will display a React component.
The render Method
The render() method is then used to specify which React component should be rendered.
But where will the rendering take place?
Your React project’s root directory contains another subdirectory named “public”. This folder contains an index.html file.
The body of this file has only one <div>. Here is where our React application will be displayed.
Example
Display a paragraph inside an element with the id of “root”:
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
The result is displayed in the <div id=”root”> element.
<body>
<div id="root"></div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
It should be noted that the element id does not have to be “root”, however this is the common convention.
The HTML Code
The HTML code in this tutorial uses JSX, which allows you to write HTML tags within the JavaScript code:
Don’t worry if the syntax is strange; you’ll learn more about JSX in the following chapter.
Example
Create a variable that contains HTML code and display it in the “root” node:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);
The Root Node
The root node is the HTML element where you want to show the results.
It functions similarly to a React-managed content container.
It doesn’t need to be a <div> element or have the id=’root’:
Example
The root node can be called whatever you like:
<body>
<header id="sandy"></header>
</body>
Display the result in the <header id=”sandy”> element.
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);
