Добрый день!
Столкнулся с такой проблемой, что при запуске файлов из документации React они отображаются неправильно.
Есть два файла HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
This is the second comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
This is the third comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
И JS:
"use strict";
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return "You liked this.";
}
return <button onClick={() => this.setState({ liked: true })}>Like</button>;
}
}
let domContainer = document.querySelector("#like_button_container");
ReactDOM.render(<LikeButton />, domContainer);
В файле JS идет синтаксис JSX и нужно подключить поддержку, путем добавления babel, но при его добавлении ничего не работает.
Я работаю в Yarn и прописывал команды yarn add (и названия библиотек от
сюда), но ничего не работает.
Выходит это
Не могли бы помочь подсказать что я делаю неправильно.
Заранее всем благодарен!
