React не дает результата - PullRequest
Новая
       26

React не дает результата

1 голос
/ 28 мая 2020

Я учусь использовать реакцию с babel, но в окне отображается пустая страница. Я использовал необходимые ссылки CDN - 

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


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

<body>
  <div id='app'></div>
  <script type="text/babel">
    class App extends React.Component {
      render() {
        return (<div className = "app-content">
          <h1> Hey, this message is not SHOWING </h1>
          </div>
        )
      }
    }
    ReactDOM.render(<App/>, document.getElementById('app'));
  </script>
</body>

1 Ответ

1 голос
/ 28 мая 2020

Связано с этой проблемой CORS:
https://github.com/babel/babel/issues/8515
Вы не можете запустить его локально или с локальными файлами. Возможно, вы сможете использовать неминифицированную версию.

unpkg @ babel / standalone 7.x, похоже, имеет дополнительные проблемы. Если проблемы не исчезнут, попробуйте использовать версию 6.x. Я включил его в качестве закомментированного тега сценария для справки.

Кроме того, он не предназначен для производственного использования. Это в основном просто для игры. Есть некоторые допустимые варианты использования, но маловероятно, что вы сопоставите любому из них . Даже в процессе разработки вы действительно должны использовать подходящую среду. 

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<!--
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<body>
    <div id='app'></div>

</body>
    <script type="text/babel">
        class App extends React.Component {
            render() {
                return (
                    <div className="app-content">
                        <h1> Hey, this message is not SHOWING</h1>
                    </div>
                )
            }
            
        }
        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>
...