Virtual DOM - Component Rendering

Showcase the process of rendering a component and creating a Virtual DOM tree representation.

// Define a simple React component
function MyComponent(props) {
  return React.createElement('div', null, `Hello, ${props.name}!`);
}

This is a basic React component that takes `props` and returns a new element (a div) with a string that includes the `name` property from the props.

// Create a virtual DOM element using the React component
const virtualElement = React.createElement(MyComponent, { name: 'World' });

Here, React's `createElement` function is used to create a virtual DOM element. It uses `MyComponent` as the type and passes in props with `name` set to 'World'.

// Render the virtual DOM to the actual DOM
ReactDOM.render(virtualElement, document.getElementById('app'));

Finally, `ReactDOM.render` is called to render the virtual element into an actual DOM node with the ID 'app'. This is when the React library takes the virtual DOM and creates the necessary DOM operations to display the component on the page.