Я пытаюсь ввести код React в документ HTML. Я следую за собственной документацией React и вставляю их стартовый код (простая кнопка «Мне нравится») на страницу. Все работало отлично. Я изменил его, чтобы использовать JSX, изменил его на функциональный компонент, используя хуки вместо компонента класса с состоянием. Нет проблем.
Однако всякий раз, когда я включаю вызов import и пытаюсь ввести другой компонент, компонент ломается на странице и перестает отображаться, но не выдает никакой ошибки, которую я вижу.
Как мне развиваться «реагировать» с компонентами и модульностью, внедряя их в страницу html?
Вот код, с которым я сейчас работаю:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like Я сказал, что любое утверждение импорта, кажется, там, где оно ломается. Не могу найти ресурсы онлайн об этом. Заранее спасибо за помощь!