Do0msDay Do0msDay - 2 months ago 10
React JSX Question

Blank page when running HTML page with JSX

I was following a tutorial on Lynda, when they first introduce us to JSX they use the following example code:

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<title>My First React File</title>
</head>
<body>
<div id='react-container'></div>
<script>
ReactDOM.render(<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>,
document.getElementById('react-container'))
</script>

</body>
</html>


But this doesn't seem to be working for me. When I run the HTML file in the browser containing the code above, it gives me a blank page.

Could someone please point me to what I'm doing wrong here?

Answer

As per the React docs, you need to:

  • Tell the browser that the JSX is not JavaScript
  • Transpile the JSX to JavaScript

So add to the head:

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

And change your JSX script tag to:

<script type="text/babel">