How can I render a React component in usual website

Question

How can I render a React component in my app?

I add these 3 lines in my head section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>

and then my component:

<script type="text/jsx" src="/js/test-react.js"></script>

In body section I have block with the following id:

<div id="react-test"></div>

This is my react component:

const el = document.getElementById("react-test");

const arr = [
  'One1',
  'One2',
  'One3',
  'One4',
  'One5',
]

class TestReactComponent extends React.Component {
  constructor(porps) {
    super(props)

    this.state = {
      isReady: true
    }
  }

  render() {
    return (
      <ul>
        {arr.map((item, i) => {
          return (
            <li>
              <a href="#">{item}</a>
            </li>
          )
        })}
      </ul<
    )
  }
}

ReactDOM.render(<TestReactComponent/>, el);

I have no errors in my console but it does nothing at all. My block with id react-test is empty.

Answer 1

The ul closing tag is not correct.