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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.