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

Я начинаю изучать React и пытаюсь запустить эту страницу, но поймал эту ошибку: Отказался выполнять скрипт с «https://unpkg.com/browse/[email protected]/babel.min.js», поскольку его тип MIME («текст/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/[email protected]/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>

javascript html reactjs

10.12.2020 05:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

604

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша ссылка неверна. /Обзор:

https://unpkg.com/browse/[email protected]/babel.min.js

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

https://unpkg.com/[email protected]/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/[email protected]/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 заставляет клиентов самостоятельно транспилировать код, что требует довольно много накладных расходов)

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

— 10.12.2020 05:50

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

— 10.12.2020 05:51

10.12.2020 05:40