Why does the first example work when the jsx script is inline but the second example not work:
<!DOCTYPE html>
<html>
<head>
<title>ReactJS Example</title>
<script src='react/react.js'></script>
<script src='react/react-dom.js'></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id='container'>
</div>
<script type='text.jsx'>
ReactDOM.render(
<h1> Hello, React! </h1>,
document.getElementById('container')
);
</script>
</body>
</html>
second example:
<!DOCTYPE html>
<html>
<head>
<title>ReactJS Example</title>
<script src='react/react.js'></script>
<script src='react/react-dom.js'></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id='container'>
</div>
<script src='hello.js' type='text.jsx'></script>
</body>
</html>
hello.js:
ReactDOM.render(
<h1> Hello, React! </h1>,
document.getElementById('container')
);
Top comments (4)
You misspelled the name of the script. You probably want
hello.jsinstead ofhello’js.Please, check your logs next time.
sorry about that, just a typo. When fixed file still does not load
What do the logs say?
also tried type='text/babel'