react dom and react dom render
React JS

React DOM Understanding – Working with Pure React

Getting core concepts of working of reactDOM and react rendering in modern browsers.

React as we all know is one of the most well-known framework for writing frontend applications. With features like state management and component-based architecture makes it capable of writing reusable code.

Learning React difficult?

Well if you are beginner in JavaScript this maybe challenging for you at first. But here we will be discussing react in a very symmetric way. To understand react we must know the basic implementation of react library so called Pure React.

In this approach we first need to keep in mind that react is just a JavaScript library and it works in same way as normal JavaScript does.

To run it in browser we get help from two built in modules:

Views also called as components are created using react library and to render these views into browser we use react-dom library.

Here we can an example of html document which uses these libraries:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Pure React Learning – Techluts</title>
</head>
<body>
 <div class="react-container"></div>
 <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
 <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
 <script>
 </script></body></html>

Virtual Dom:

Browser follows document object model and follow HTML instructions in a sequential way. For example:

To make tea in html we do:

<section id="tea">
 <h1>Tea</h1>
 <ul class="ingredients">
 <li> Milk</li>
 <li>Water</li>
<li>Sugar</li>
<li>Tea</li>
</ul>
</section>

These sequential statements forms hierarchy that resembles to a family tree like structure. For instance in above example section tag have two children.

Unlike traditional webpage, AJAX enables browser to initially loads an HTML document, user scroll through page they actually stays on the same page. JavaScript destroys and recreate new user interface when user interact with webpage. ReactJS use this approach and it feels like we are navigating different pages but actually we are on same page.

React.createElement():

Browser DOM contains DOM elements. In same way ReactDOM consists of react elements. Here question arises, What is reactDOM? Do we need to learn new DOM concepts?

Relax, reactDOM is nothing but instructions to render DOM elements. Here is an example of rendering heading tag for example above:

React.createElement("h1", null, "Tea")

Breaking this code:

First argument represents type of element we want to create (in above case h1 element)

  • Second argument contains properties of element
  • Third argument contains children closed between opening and closing tags.

In short, React element just a JavaScript expression that tells ReactDOM to construct specific element.

Here is an other example of reactDOM:

<ul>
 <li>Butter</li>
 <li>Cheese</li>
 <li>Milk</li>
 <li>Yogurt</li>
 <li>Cream</li> 
 <li>Chocolate</li>
</ul>

ReactDOM interprets it in following way:

React.createElement(
 "ul",
 null,
 React.createElement("li", null, "Butter"),
 React.createElement("li", null, "Cheese"),
 React.createElement("li", null, "Yogurt"),
 React.createElement("li", null, "Cream"),
 React.createElement("li", null, "Chocolate")
)

This data can easily be interpreted by using array. As here:

var dairyItems = ["Butter","Cheese","Yogurt","Cream", "Chocolate"]

Then using Array.map function we can create DOM elements.

React.createElement(
 "ul",
 { className: "ingredients" },
 dairyItems.map(ingredient =>
 React.createElement("li", null, ingredient)
)

ReactDOM Rendering:

This is where whole react stuff come into place. RD is capable of passing data as props to our components. In other words we can separate out data logic and then pass into our component.

This makes out our code more readable and easy to manage. Combination of ReactDOM and ReactState gives us power to re-render function when data is changed or state is updated.

ReactDOM.render iterates specific DOM elements instead of re-rendering complete page.

This keeps our application smooth because in larger applications mutations occurs hundreds of time.

Conclusion:

ReactDOM uses built-in methods like .createElement() to create DOM elements in browser. Its also enables us to re-render specific elements when on user interactions.

What Next?

Next we need to take a look on JSX which is the actual building blocks of a react application.

If you learned something new please lets us know in comment section. We appreciate your contribution.

Leave a Reply

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