Tengo una aplicación que consta de un archivo html así:
<!-- ... 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>También tengo un componente de reacción que se ve así:
class InputField extends React.Component { render(){ return( <div> <h1>test</h1> </div> ) } } ReactDOM.render(<InputField />, document.getElementById('input-field'))Como habrás notado, el componente de reacción usa la sintaxis jsx. Quiero poder ejecutar un script de compilación que convierta todos mis archivos jsx a js para que mi navegador pueda leer y representar los componentes.
Gracias
En primer lugar, debe agregar Babel para transpilar su JSX , que es cómo lo haría agregando esta línea a su archivo html :
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> y luego lo que necesita es agregar la propiedad de type a su secuencia de comandos InputField de esta manera:
<script type="text/babel" src="InputField.js"></script>Aquí está el código completo:
<!-- ... 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>