Using the Functional Components for optimizing VDOM

Create stateless functional components that are free from instance-related overhead to achieve a faster VDOM rendering.

const MyFunctionalComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
};

This is a simple functional component that accepts props and returns a JSX element. It is stateless and does not use lifecycle methods, which makes it optimal for VDOM performance.

ReactDOM.render(
  <MyFunctionalComponent name="User" />, 
  document.getElementById('root')
);

This code renders the functional component into the DOM. The component is mounted into a root DOM node with the id 'root'.

/* CSS */
div {
  text-align: center;
}
h1 {
  color: blue;
}

This is the CSS that styles the functional component. The 'div' is centered and the 'h1' element has a blue color. It's separate from JavaScript logic and doesn't impact VDOM performance.

<!DOCTYPE html>
<html>
<head>
  <title>Functional Component Example</title>
  <style>
    /* CSS goes here */
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="path_to_your_compiled_js"></script>
</body>
</html>

This is the HTML file that includes the root element where the React application mounts. The script tag should link to the compiled JavaScript file that contains the React code, including the functional component.