#javascript #reactjs #jsx
#javascript #reactjs #jsx
Вопрос:
Первое, что я хотел бы сказать, это то, что я, очевидно, новичок в React. Я все настроил так, как они сказали на своем веб-сайте, даже для JSX.
Когда я вставляю их код, он запускается, но когда я добавляю JSX, он вообще не работает. У меня есть node.js на моем компьютере тоже, и я повторял это несколько раз, но безуспешно. Консоль сообщает: Uncaught SyntaxError: ожидаемое выражение, получено ‘<‘.
Если у кого-нибудь есть какие-либо подсказки, почему это не работает, это было бы действительно полезно. Это мой код:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Nova Monoamp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Antonamp;display=swap" rel="stylesheet">
</head>
<body>
<div id="back-body">
<div id="main-canvas">
<div id="root"></div>
</div>
</div>
<!--React-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--Babel-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
JS-файл:
'use strict';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Большое спасибо! 🙂
Редактировать
Я обнаружил проблему после просмотра этого видео: https://youtu.be/ahh65GQz74g
В принципе, я неправильно настроил Babel, поскольку неправильно размещал папки. Кроме того, я оставил сценарий Babel в своем HTML, которого там не должно быть. Если кто-то еще придет сюда с такой же проблемой, я рекомендую делать именно то, что сказано в этом видео.
Спасибо всем за вашу помощь!
Комментарии:
1. Поскольку JSX — это не JS, что-то должно перенести его обратно в вызовы React.createElement.
2. Да, я тоже добавил Babel, но все равно не работает.
3. Но нет ничего, чтобы сказать ему, что делать. Вам нужен type=»text/Babel», по крайней мере, см. babeljs.io/docs/en/babel-standalone .
Ответ №1:
Добавление следующего атрибута к вашему окончательному тегу script должно помочь:
<script type="text/babel" src="./index.js"></script>
Важно отметить, что это не очень хорошая практика для производственных сред, поскольку компиляция на стороне клиента медленная и расточительная, поэтому вам следует рассмотреть возможность предварительной компиляции ваших сценариев и соответствующей настройки вашего проекта.
Обновление: попробуйте изменить исходный код babel следующим образом:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Комментарии:
1. Я пытался, но по-прежнему ничего не получалось. Я попытался поместить скрипт в HTML-файл, и он работает, но не тогда, когда он находится в JS-файле. Можете ли вы порекомендовать мне какую-либо документацию? Большое спасибо.
2. @aZero обновил ответ, используя ту версию babel, которая у меня работает … следите, используете ли вы локальный сервер или открываете html-файл непосредственно в браузере?
3. Я открываю HTML-код прямо в браузере, да. Я изменил сценарий, и он тоже не работает. Кроме того, я провел аудит npm, потому что увидел проблему, и в аудите указано «Регулярное выражение отказа в обслуживании». Может ли в этом быть проблема?
4. да, здесь может быть проблемой открытие HTML непосредственно в браузере … не могли бы вы попробовать войти в каталог, в котором у вас есть файлы, через командную строку и запустить команду «npx serve»? Это приведет к подключению локального сервера к порту 5000, так что переход к localhost: 5000 в вашем браузере должен показать вам, что приложение работает правильно.
5. Нет, вообще ничего. Я открыл его с локального хоста, и результат все тот же. На самом деле не знаю, в чем проблема, но я попытаюсь решить ее завтра. Я действительно ценю вашу помощь 🙂
Ответ №2:
Возможно, добавление «text / babel» и его настроек также работает
<script type="text/babel" src="./index.js" data-presets="es2015,react"></script>