phantom phantom - 2 months ago 9
React JSX Question

React render method not working when referencing jsx file in html

I am trying to reference a jsx file from my html, but the render function is not showing anything, and there aren't any errors in the console.

*Note - I changed the fb CDN links below as SO wouldn't allow them. The CDN links are not the issue.

My code looks like this:

HTML

<html>
<head>
<script src="https://f*b.me/react-0.14.6.js"></script>
<script src="https://f*b.me/react-dom-0.14.6.js"></script>
<script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<div class="container">
<div id="loggedin"></div>
</div>
<script type="text/babel" src="js/script.jsx"></script>
</body>
</html>


JSX

var App = React.createClass({
render: function() {
return(
<h1>Hello</h1>
)
}
});

ReactDOM.render(<App />, document.getElementById('loggedin'));

Answer

React uses babel to convert your jsx to js. So, add babel instead of JSXTransformer and save the file as .js not .jsx

Add this to your script

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

Reference

Comments