React JS app - Uncaught SyntaxError: Unexpected token <

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?

score 3 · Accepted Answer · answered Nov 15 '16 at 18:57

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 '16 at 18:57

Sushanth --

55,259
9
66
105

score 0 · Answer 2 · answered Nov 15 '16 at 19:44

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 '16 at 19:44

phantomCoder

1,499
3
18
32

React JS app - Uncaught SyntaxError: Unexpected token <

2 Answers2