ReactJS Starter - Unexpected tokens JSX

Question

I just started looking into ReactJS (not really experienced with any of the javascript libraries or frameworks, except for jQuery).

I followed the following pages from the ReactJS website (https://reactjs.org/docs/add-react-to-a-website.html and https://reactjs.org/docs/hello-world.html), but I keep getting the same error:

Uncaught SyntaxError: Unexpected token <

I don't really know what causes this, when I use this code in CodePen, it works just fine. Do I need to add a couple of other JS files in my index?

Current files:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

<div id="root"></div>

<!-- Scripts -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>

JS

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Thank you all in advance!

PS: when I add import React and import ReactDOM, I get an Unexpected identifier error.

JSX is not proper JavaScript, but is compiled down to React.createElement calls, so you must compile it or use Babel in the browser for testing purposes. — Tholle
Did you also follow the steps listed here: reactjs.org/docs/… ? JSX isn't actually valid Javascript in any version of the spec, you need a transpiler (like Babel) to convert it to valid JS — Robin Zigmond
@RobinZigmond I didn't know that, I will be looking into that. Thanks for the help! — KKlonne

Code Majic Code Majic · Accepted Answer · 2018-11-02T16:32:59

the main problem is that your missing the React.createElement() so your <h1>Hello, world!</h1> is interpreted as plain text.

ReactDOM.render(React.createElement('h1', null, 'Hello World'),
  document.getElementById('root')
);

Change your code to this and it should work.

:)

ReactJS Starter - Unexpected tokens JSX

1 Answers