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.

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</h1>
                    <li >FIrst</li>

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

Your email address will not be published. Required fields are marked *