how to change html script tag to jsx code?

Having trouble converting this to jsx, i know the tag itself in html represents jsx but when i add it to a new file thats a .js it just reads my code as text? it just displays my code as text on the webpage
(this code works on an html page, its an input box where a user would input an email for a newsletter)

<html>
<body>
   ...styling code elements
   ...styling code elements

<button  class="join" id = "join"> join </button>
  
        <script>
            let email = document.getElementById("email")
            document.getElementById("join").onclick = () => {
                console.log(email.value)
                fetch("/sendemail?email=" + email.value, {
                    method: "POST"
                }).then((res) => {
                    // success
                    alert("success")
                }).catch((err) => {
                    // error 
                    alert(err)
                })
            }
        </script>
   </body>
</html>