'Adding React via Script Tags

When I add React via script tags (as described here), and also add Babel as script tag, I can write a script tag like this:

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

This works. However, creating a new JavaScript file with this exact content and adding a script tag with the path to it as its src attribute does not. I'm a complete beginner, this is propably a really simple problem, but please help me out. Why does this not work, and how can I make it work?

Edit: This is how my files look:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel" src="./index.js"></script>
</body>
</html>

// index.js
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
javascripthtmlreactjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions