Mastering DOM Manipulation in React: Virtual DOM vs Traditional DOM

If you are wondering if it is okay to dive into React, while you are yet to understand JavaScript, well my response would be while you can learn JavaScript and React at the same time, being familiar with JavaScript can make the process of learning React easier. However, being familiar in this case does not equate to being an expert.

In JavaScript, we encountered DOM(Document Object Model) and DOM Manipulation. DOM in web development is a tree-like structure that represents the structure of a webpage, the tree structure is a combination of various nodes, where each node represents a different part of the HTML Document. DOM manipulation is making changes to the DOM (tree) using scripting languages like JavaScript. DOM manipulation looks like below the page. Imagine you are working on a robust project, and you'd have to go through this every time you need a change. You already can preempt how exhausting that will be. And this is where React comes in.

React offers a less difficult alternative to making changes, it does so using React DOM, a virtual DOM that is like a copy of the real DOM. React Instead of manipulating the actual DOM, goes on to update this virtual version. After changes, React goes on to compare the virtual DOM with the real DOM, and updates only the parts that have changed. An understanding of virtual DOM manipulation is key to leveraging React’s perfomance benefit. By abstracting the direct interaction with the DOM, the developers are allowed to focus on creating User Interface components, while React does the updating whenever it is needed.

// DOM MANIPULATIOn USING PLAIN JAVASCRIPT
<script>
const app = document.getElementById('app'); //Target the element with the app id
const header = document.createElement('text'); // To create aN h1 element
const text = 'Work. Pray. Enjoy.'; // to the text to be added into the h1 element
const headerContent = document.creatTextNode(text); 
header.appendChild(headerContent); //add the text to the header
app.appendChild(header); // add the header to the app element.
</script>

// Use this Instead 
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app); // targetting a specific DOM element
      root.render(<h1>Develop. Preview. Ship.</h1>); //rendering the code to the D
    </script>