React JS app - Uncaught SyntaxError: Unexpected token < [duplicate]

Question

My code is throwing syntax error at line <div>Hello World!</div>

This is my code

<!DOCTYPE html>
<html>
<head>
    <script src="libs/react.min.js"></script>
    <script src="libs/react-dom.min.js"></script>
</head>
<body>
    <div id="main">

    </div>

<script>
    var MessageComponent = React.createClass({
        render: function() {
            return (

                <div>Hello World!</div>
            );
        }
    });

    ReactDOM.render(
        <MessageComponent message="Lorem" />,
        document.body
    );
</script>    
</body>
</html>

What could be the issue?

Sushanth -- · Accepted Answer · 2016-11-15 18:57:26Z

3

You are using the JSX syntactic sugar to build your UI component and browsers don't understand that.

You will have to transpile it to JS first before it can work.

answered Nov 15, 2016 at 18:57

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

phantomCoder · Accepted Answer · 2016-11-15 19:44:38Z

0

I added Babel in the page

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

and added type="text/babel" to the script tag. That fixed the issue

answered Nov 15, 2016 at 19:44

phantomCoder

1,5973 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

React JS app - Uncaught SyntaxError: Unexpected token < [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related