<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Plan List Version</title>
</head>
<body>
<h1>React Plan List Version</h1>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<div id="example4"></div>
<div id="example5"></div>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="../../build/browser.min.js"></script>
<script type="text/babel" src="plans.js"></script>
</body>
</html>
<script type="text/babel" src="plans.js"></script> √ <script type="text/babel" src="plans.jsx"></script> X
<script type="text/jsx" src="plans.js"></script> X
<script type="text/jsx" src="plans.jsx"></script> X
Separate File
Your React JSX code can live in a separate file. Create the following src/helloworld.js
.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Then reference it from helloworld.html
:
<script type="text/babel" src="src/helloworld.js"></script>
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
DOMO: