CODEWITHSUNDEEP
javascriptreactjs
Bala
Bala

Reputation: 11274

How to get rid of "Uncaught SyntaxError: Unexpected token <" in ReactJs?

Just started my ReactJS and stuck at my very first try. I have a very basic code that throws "Uncaught SyntaxError: Unexpected token <".

index.html

<!doctype html>
<head>
    <title>My first ReactJs</title>
</head>
<body>
    <div id="container"></div>
    <script src="react.js"></script>
    <script src="script.jsx"></script>
</body>
</html>

script.jsx

var MessageButton = React.createClass({
    render: function(){
        return  (
            <button>Hello World</button>
        );
    }
});

React.render(<MessageButton/>, document.getElementById("container"));

Assuming that it could be missing JSX transformer library, I searched for it but couldn't find download anywhere. I work offline most of the time, so I do not wish to use plunkr or jsbin. Could do with some help.

Upvotes: 3

Views: 623

Answers (1)

Quentin
Quentin

Reputation: 944256

First: Specify the type attribute of your JSX scripts so the browser doesn't try to execute them as JavaScript.

<script type="text/jsx" src="script.jsx"></script>

Second:

Either:

Load the JSXTransformer script (which requires an older version of React)

or

Compile the JSX using Babel:

Example taken from the docs:

babel --presets react src --watch --out-dir build

Upvotes: 3

Related Questions