I'm new to React and having trouble placing React code into separate files (i.e. moving the React code out of my main html file). Here is a simple example. The code below works fine. I get the correct "Hello, World!" output.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
When I try to split this into 2 files, "Hello, world!" does not display at all. That code is below:
Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="component2.js"></script>
</body>
</html>
JS File (component2.js):
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Why does this not work when I split it into 2 files?