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

Time:04-28

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

CodePudding user response:

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>
  • Related