Getting error while creating ReactJs Hello world program

Question

I am new in react while I am running hello world in react its give me a error Syntax Error: expected expression, got '<'.

My code is .

<html>
    <head>
        <meta charset="UTF-8" />
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script>
            ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));

        </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Thanks for support.

If you are not transpiling it, you can't use JSX syntax, you have to use React.createElement — Fez Vrasta
– Fez Vrasta, Commented Jul 16, 2018 at 4:50

Fez Vrasta · Accepted Answer · 2018-07-16 04:53:13Z

You are trying to use JSX in plain HTML/JavaScript (<h1>Hello, world!</h1>).

JSX is not supported by the browsers directly, it needs to be transpiled (converted) to JavaScript at build time by Babel.

Alternatively, you can use React without JSX, your code would be:

ReactDOM.render(
  React.createElement('h1', undefined, 'Hello, world!'), 
  document.getElementById('root')
);

https://reactjs.org/docs/react-without-jsx.html

As 3rd option, you may embed Babel in your HTML file, but this is something you should do just for learning purposes since is not performant enough for production apps:

<html>
    <head>
        <meta charset="UTF-8" />
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script type="text/babel">
            ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));

        </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Collectives™ on Stack Overflow

Getting error while creating ReactJs Hello world program

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related