Shubhang b Shubhang b - 2 months ago 8
React JSX Question

Unable to get React JS hello world working



<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React JS</title>
<script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="ex"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello</h1>,document.getElementById('ex'));
</script>
</body>
</html>





I am unable to get this intro example working.
Whenever I run this code I get a '<' on my browser.Please help.

Answer

Check the order in which scripts are loaded and you were loading babel-core asynchronously.. also you were seeing < because of your syntax error <<!DOCTYPE html>, it should be <!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>React JS</title>
	<script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
	<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
</head>
<body>
	<div id="ex"></div>
	<script type="text/babel">
		ReactDOM.render(<h1>Hello</h1>,document.getElementById('ex'));
	</script>
</body>
</html>

Comments