JS:
import React from "react"; import { ReactDOM } from "react"; import './style.css'; import App2 from "./App2.js"; function App() { return ( <App2.js /> ) } ReactDOM.render(<App />, document.getElementById('root'))App2.js referido en el archivo anterior:
import React from "react"; import { ReactDOM } from "react"; export default function App2() { return ( <div> <h1>Yusif Ahmedov</h1> <button id="email"></button> <button id="linkedin"></button> <h2>Front-End Developer</h2> <header id="about-header">About</header> <p id="about">I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.</p> <header id="interests-header">Interests</header> <p id="interests">Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.</p> </div> ) }Y HTML sencillo:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Card</title> <script type="module" src="./App.js" defer></script> </head> <body> <div id="root"></div> </body> </html>Escribí todo desde cero, por lo que no hay archivos adicionales. Cuando lo ejecuto, da un error: Uncaught SyntaxError: Unexpected token '<' App.js:8(line)
No entendí por qué da un error en la octava línea.
Los navegadores no son compatibles con JSX, debe transpilar su JSX a JS normal.
Es posible hacer esto del lado del cliente, en el navegador, pero luego también debe lidiar con la falta de soporte para la resolución del módulo Node.js (que el código asume con su uso de accesos de módulos ES6 a través de nombres de archivo sin extensión en lugar de URL) ).
Su código está diseñado para ser transpilado y empaquetado para su uso en el navegador con herramientas como Babel y Webpack. Debe configurarlos y ejecutarlos en su entorno de desarrollo local.
Esto se describe en el tutorial oficial de React.
Aparte: <App2.js /> también es un error ya que (a) los identificadores no pueden tener una extensión . en ellos y (b) lo nombró App2 cuando lo importó de ./App2.js.