Hola, ee sale este error: Uncaught SyntaxError: import declarations may only appear at top level of a module
Estoy usando Visual studio Code con un documento HTML y un Javascript llamado main:
------------------HTML---------------------
<!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>React</title>
</head>
<body>
<div id="hola"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="main.js"></script>
</body>
</html>
-----------------JAVASCRIPT----------------
import React from 'react';
import {render} from 'react-dom';
const App = () => {
return <h1>Hola Mundo!</h1>
}
render(<App />, document.getElementById('hola'));
****
Que estoy haciendo mal?
Estoy usando Visual studio Code con un documento HTML y un Javascript llamado main:
------------------HTML---------------------
<!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>React</title>
</head>
<body>
<div id="hola"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="main.js"></script>
</body>
</html>
-----------------JAVASCRIPT----------------
import React from 'react';
import {render} from 'react-dom';
const App = () => {
return <h1>Hola Mundo!</h1>
}
render(<App />, document.getElementById('hola'));
****
Que estoy haciendo mal?