my app.js
class App extends React.Component {
render() {
return (
<div><h1>Welcome to React</h1></div>
);
}
}
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
my html
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>
</body>
</html>
I want to show the whole class in html, because it takes a very long time to transfer the elements, especially when there are a lot of these elements. And the situation is that the same code works in the compiler, but only Hello is displayed for me
Here is my json, maybe something else needs to be set
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^6.7.1",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}