Why doesn't babel work with a script connected via src?

D

danilr2020-02-11 12:42:14

React

danilr, 2020-02-11 12:42:14

<!Doctype>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ReactStart</title>

    <!-- Загрузим React. -->
    <!-- Примечание: для деплоя на продакшен замените окончание «development.js» на «production.min.js». -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

    <!-- Для JSX   -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

</head>
<body>
    <div>
        <div id="componentJSX"></div>
    </div>

    <!-- Загрузим наш React-компонент c JSX. (так не работает JSX)-->
    <script type="text/babel" src="componentJSX.js"></script>
   <!--   А так работает -->
   <script type="text/babel" >
       ReactDOM.render(<button>start</button>, document.getElementById('componentJSX'))
    </script>
</body>
</html>

It doesn’t work like that, it gives some error about CORS, but if you insert the script tag directly in this html and insert everything from componentJSX.js into it, then it works as it should. Why is that? How to connect components and work with JSX in them? Without a faucet, that's important.