Estoy tratando de hacer un proyecto React sin Node y estoy llamando a un archivo JS desde un archivo HTML. Solo estoy tratando de hacer un ejemplo simple para aprender. Por alguna razón, obtengo un error de sintaxis no detectado: token inesperado '<'error en el archivo JS. Estoy usando Tomcat para ejecutar este proyecto localmente y este proyecto se usará solo localmente (las computadoras no tendrán Internet). Soy nuevo en reaccionar, así que por favor ilumíname.
archivo HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React Local</title> </head> <body> <link href="./js/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="./js/jquery.min.js" type="text/javascript"></script> <div id="root">Loading....</div> <script src="./Component/RootComponent.js"></script> <script src="./js/react.development.js"></script> <script src="./js/react-dom.development.js"></script> <script src="./js/babel.js"></script> </body> </html>archivo JS
class RootComponent extends React.Component{ render() { return ( <> <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> </> ); } } // Create a function to wrap up your component function App(){ return( <div> <RootComponent name="@luispagarcia on Dev.to!"/> </div> ) } ReactDOM.render( <App />, document.querySelector('#root') )Consulte la documentación .
Debe decirle al navegador (y al compilador de babel del lado del cliente) que su secuencia de comandos no es JS necesita compilarse con babel configurando type="text/babel"
<script src="./Component/RootComponent.js" type="text/babel"></script>Recomiendo encarecidamente configurar un compilador local en lugar de usar babel del lado del navegador.