<!-- element -->
<div id="comp04" class="sec"></div>

<!-- component -->
<script src="componets/Comp04.js" type="text/babel"></script>

<!-- react -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  
<!-- поддержка text/babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

#comp04 div .item {
  display: block;
  background: #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

'use strict';

function test04() {
  
  let arr = [];
  for (let i = 1; i < 4; i++) {
    arr.push(
      <li key={[i]} className="item" onClick={newColor}>{[i]}</li>
    );
  }

  let item = document.querySelectorAll('.item');
  function newColor(item) {
    item.style.background = 'red';
  }

  return <div>{arr}</div>
}

const rootNode = document.getElementById('comp04');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(test04));