How can I convert JSX to JS without npm using a build script?

I have an application that consists of an html file like so:

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

<div id="input-field"></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>

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

I also have a react component that looks like this:

class InputField extends React.Component {
    render(){
        return(
            <div>
                <h1>test</h1>
            </div>
        )
    }
}

ReactDOM.render(<InputField />, document.getElementById('input-field'))

As you may have noticed, the react component is using jsx syntax. I want to be able to run a build script that converts all my jsx files to js so that my browser can read and render the components.

Thanks

Answer

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>

Advertisement

Answer