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>