How reactdom render works

Let us look at how react web application works. Please find the source code for very basic application at below location.
https://github.com/conquistadorjd/myreactapp

Let us look at index.js file.

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

class App extends React.Component {  
   render() {
      return (<div>  
                <h1>You are on website techtrekking.net</h1>
                <ul>
                    <li >FIrst</li>
                    <li>Second</li>
                    <li>Third</li>
                  </ul>
              </div>)
   }
}

ReactDOM.render(<App />, document.getElementById('root'));  

Now let us look at each elements separately:

var React = require('react');  

• It saves a JavaScript object into your file. This object contains methods that are needed to make React work, such as React.createElement and React.createClass
• when a JSX element is compiled, it transforms into a React.createElement() call. e.g. React.createElement

var ReactDOM = require('react-dom');  

• The methods returned by require(‘react-dom’) are for interacting with the DOM. e.g. ReactDOM.render
• This object contains methods that are concerned with DOM interaction, such as ReactDOM.render

ReactDOM.render(<App />, document.getElementById('root'));  

• ReactDOM.render is the most common way to render JSX
• It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.
• ReactDOM.render()’s first argument should evaluate to a JSX expression, it doesn’t have to literally be a JSX expression. The first argument could also be a variable.
• Second argument is the DOM where this will be rendered.