Uncaught SyntaxError: expected expression, got '<'

Question

Im trying to display the "Hello World" into the browser by using react

 import React from 'react'; import ReactDOM from 'react-dom'; const myelement = <h1>Hello World</h1>; ReactDOM.render(myelement, document.getElementById('root'));

 <.DOCTYPE html> <html> <head> <link rel="shortcut icon" href="#"> <title>List</title> </head> <body> <div id="react"></div> <script type="module" src="script:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> </body> </html>

However I keep getting the error as said in the headline of the post. Is there a way to solve this?

Answer 1

You have to add babel to use JSX . And the id of the root element should match the id in the ReactDOM.render function

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="#">
    <title>List</title>
  </head>
  <body>
    <div id="root"></div>
  
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"> 
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <script type="text/babel">
      const myelement = <h1>Hello World</h1>;

      ReactDOM.render(myelement, document.getElementById('root'));
    </script> 
  </body>
</html>

Uncaught SyntaxError: expected expression, got '<'

Question

1 answers

solution1
0 2021-03-17 09:19:04

Uncaught SyntaxError: expected expression, got '<'

Question

1 answers

solution1 0 2021-03-17 09:19:04

solution1
0 2021-03-17 09:19:04