CODEWITHSUNDEEP
javascriptreactjs
mundus
mundus

Reputation: 115

Uncaught SyntaxError: expected expression, got '<'

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?

Upvotes: 1

Views: 3419

Answers (1)

Siddiq Nx
Siddiq Nx

Reputation: 122

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>

Upvotes: 1

Related Questions