React.js not executing in simple local hello world

Question

So I've been reading the basic guide and have set up a hello world file with no npm or anything, just an html file.

According to ReactJS: "Uncaught SyntaxError: Unexpected token <" I should have the script type set to text/jsx or text/babel. Neither work, since neither print the "hi" or do anything.

<html>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <div id="root">
  </div>
  <script type="text/jsx">
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
    );
    console.log("hi");</script>
</html>

What's going on and how do I get it to execute?

why was this question downvoted? This is something that I literally spent half an hour figuring out that I'm sure lots of people trying out react.js encounter — wonton, Jan 12 '17 at 18:14

score 4 · Accepted Answer · answered Jan 11 '17 at 23:24

After much digging around, here's the high level of what's causing the issue.

The code in the question is in JSX which transpiles to javascript using a transpiler called Babel. The misunderstanding is that the transpiler is not built into the web browser. What you can do is however is import Babel at the top with

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

and then make sure the script type is set to text/babel and it should work.

1

Thanks for the answer. – Raz Galstyan Jul 11 '17 at 06:19

React.js not executing in simple local hello world

1 Answers1