First of all you need to add Babel to transpile your JSX which here is how you would do that by adding this line to your html file:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

and then you need is to add the type property to your InputField script like this:

<script type="text/babel" src="InputField.js"></script>

Here is the complete code:

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

  <!-- Load 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>
  <!-- Babel js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


  <!-- Load our React component. -->
  <script type="text/babel" src="InputField.js"></script>
</body>

If you are using babel-cli you need to use a plugin to transform jsx syntax to js syntax that the browser understands. See the following link: http://babeljs.io/docs/plugins/transform-react-jsx/ You'll need to install babel-plugin-transform-react-jsx plugin and use it in a .babelrc file like that:

{
  "plugins": ["transform-react-jsx"]
}

Then your babel command should work.

I haven't tried it myself, but there is apparently now a babel plugin to do exactly what you ask.

babel-js-to-jsx

https://github.com/JoeStanton/babel-js-to-jsx

Per the documentation:

Babel 6 plugin to convert from desugared React.DOM CallExpressions -> the equivalent JSX. Currently used to migrate to ES6+ from other compile to JS languages.

It can be used as a plugin:

require("babel-core").transform(code, {
  plugins: ["js-to-jsx", "syntax-jsx"],
}).code

Or from the command line for composition with other tools:

npm install babel-plugin-js-to-jsx
cat example.ls | lsc -cb --no-header | js-to-jsx | esformatter -c format.json