Я изучаю Реакт. Я добавил их на свой сайт с тегом html script:
Мой index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>MyWebsitewithReact</title>
<link rel = "stylesheet" href = "css/main.css">
<meta name = "theme-color" content = "#2e2e2e">
</head>
<body>
<div class = "navbar">
<a href = "#">Home</a>
<a href = "developer/">Plugins</a>
</div>
<div id = "root"></div>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "js/index.js"></script>
</body>
</html>
Мой index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
Это ошибка, которую я получаю:
Ошибка: ошибка Minified React # 299; посетите https://reactjs.org/docs/error-decoder.html?invariant=299 для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.
Пробовал зайти, ошибка:
createRoot(...): целевой контейнер не является элементом DOM
Я проверил документацию, и все выглядит нормально
Обновлено:
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
сначала в вашем файле index.js вам нужно добавить в первую строку:
import React from 'react';
import ReactDOM from 'react-dom/client';
потому что без импортированной этой библиотеки вы не сможете использовать элементы React и ReactDOOM.
и в вашем index.html вам нужно заменить это:
<script src = "js/index.js"></script>
к этому:
<script src = "js/index.js" type = "text/babel" data-type = "module"></script>
Хотел бы я решить твою проблему.