So now that we've got the ReactJS from where we've initialized our app, let's start writing our first Hello World app using ReactDOM.render(). The first argument of the ReactDOM.render method is the component, which we want to render, and the second is the DOM node to which it should mount (append). Observe the following code:

ReactDOM.render( ReactElement element, DOMElement container,[function callback] )

We need to translate it to vanilla JavaScript because all browsers don't support the JSX and ES6 features. For this, we need to use transpiler Babel, which will compile the JSX to vanilla JavaScript before the React code runs. Add the following library in the head section along with React libraries:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Now, add the script tag with React code:

<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('hello')
);
</script>

The <script type="text/babel"> tag is the one that actually performs the transformation in the browser.

The XML syntax for JavaScript is called JSX. We will explore this further in more detail. Let's open the HTML page in our browser. If you see Hello, world! in your browser, then we are on track. Observe the following screenshot:

In the preceding screenshot, you can see that it shows Hello, world! in your browser. That looks nice. We have successfully completed our setup and built our first Hello World app with ReactJS.