Comparing Virtual DOM to Real DOM

Show a simple JSX element being rendered and then update its state to see how React updates the Virtual DOM first before touching the Real DOM.

// Import React and its Hooks
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// Define a simple component
const MyComponent = () => {
  // Initialize state with useState Hook
  const [count, setCount] = useState(0);

  return (
    // JSX for rendering the component
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

// Render the component to the Real DOM
ReactDOM.render(<MyComponent />, document.getElementById('root'));

Defines and renders a simple React component with state using the JSX syntax. React will handle the rendering to the Virtual DOM and only update the necessary parts in the Real DOM upon state changes.

// Update the state when the button is clicked
// React updates the Virtual DOM first
// Only the text in <p> element will be actually updated in the Real DOM

This is a comment explaining how React updates only the necessary parts in the DOM based on the state change after a button click.