Блог

Главная - Вопросы по программированию - Отказался выполнить JSX Babel?

Отказался выполнить JSX Babel?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я начинаю изучать React и пытаюсь запустить эту страницу, но я обнаружил эту ошибку: отказано в выполнении скрипта из ‘https://unpkg.com/browse/babel-standalone@6.26.0/babel.min.js ‘потому что его MIME-тип (‘text/html’) не является исполняемым, и включена строгая проверка типа MIME. Может кто-нибудь мне помочь?

 <!DOCTYPE html>
<html lang="en">
<head>
    <title> React work </title>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/browse/babel-standalone@6.26.0/babel.min.js"></script>

</head>
<body>
    <div id='react-root'></div>
    <script type="text/babel">
    class Bonjour extends React.Component
    {
        render()
        {
            return (
                <h1> Hello from React </h1>
            )
        }
    }
    ReactDOM.render(
    <Bonjour/>,
    document.getElementById('react-root')
    )

</script>

</body>

</html>

Ответ №1:

Ваша ссылка неверна. /browse является:

https://unpkg.com/browse/babel-standalone@6.26.0/babel.min.js

Это веб-страница, а не .js файл. Нажмите кнопку «Просмотреть необработанный», чтобы перейти к простому JS:

https://unpkg.com/babel-standalone@6.26.0/babel.min.js

Используйте это вместо этого, и вы получите:

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

<div id='react-root'></div>
<script type="text/babel">
    class Bonjour extends React.Component
    {
        render()
        {
            return (
                <h1> Hello from React </h1>
            )
        }
    }
    ReactDOM.render(
    <Bonjour/>,
    document.getElementById('react-root')
    )
</script>

Но, предложение — используйте Babel Standalone только для отладки, если это возможно. Для реальных приложений, как только они будут готовы для публичного использования, лучше перенести JSX самостоятельно, а затем предоставить его клиентам. (Babel Standalone заставляет клиентов самостоятельно выполнять перенос кода, что требует довольно больших накладных расходов)

Комментарии:

1. Большое спасибо. Итак, как я могу перенести JSX самостоятельно? У вас есть какая-нибудь ссылка для меня, пожалуйста?

2. create-react-app — хорошая отправная точка, хотя вы также можете связать все пакеты вместе вручную, если хотите