Виконацець: Моріс Назар

function energy_lab1_enqueue_react_no_babel() {
    // 1) React (UMD dev build)
    wp_enqueue_script(
        'react',
        'https://unpkg.com/react@18/umd/react.development.js',
        array(),
        null,
        true
    );
    // 2) ReactDOM (UMD dev build)
    wp_enqueue_script(
        'react-dom',
        'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
        array( 'react' ),
        null,
        true
    );
    // 3) Our pre-written React script (no Babel, pure JS)
    wp_enqueue_script(
        'lab1-hello-world',
        get_stylesheet_directory_uri() . '/js/lab1-hello-world.js',
        array( 'react', 'react-dom' ),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'energy_lab1_enqueue_react_no_babel' );

// lab1-hello-world.js

document.addEventListener('DOMContentLoaded', function() {
  const mountNode = document.getElementById('react-root-1');
  if (!mountNode) return;

  // alias for React.createElement
  const e = React.createElement;

  // Define a “component” as a function that returns createElement calls
  function HelloWorld() {
    return e(
      'div',
      {
        style: {
          fontFamily: 'Arial, sans-serif',
          textAlign: 'center',
          marginTop: '40px',
          color: '#4caf50'
        }
      },
      e('h1', null, 'Hello World'),
      e('p', null, 'This is Lab 1 rendered without JSX or Babel.')
    );
  }

  // For React 18 use createRoot:
  ReactDOM.createRoot(mountNode).render(e(HelloWorld));
});