HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<span>Total clicks: 0 </span>
<button id="btn"> Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter++;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
React JS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"></script>
<script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement("h3", {id: "title",onMouseEnter: () => console.log('mouse enter')},"Hello I'm a span");
const btn = React.createElement("button", {onClick: () => console.log("im clicked"), style:{backgroundColor:"tomato"}} ,"Click me");
const container =React.createElement("div",null,[h3,btn]);
ReactDOM.render(container,root);
</script>
</html>
JSX
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"></script>
<script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>"></script>
<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () =>(
<h3 id="title"
onMouseEnter={() => console.log("mouse enter")}
onClick={()=>console.log("im clicked")}> Hello I'm a title</h3> )
/*
function Title() {
return (<h3 id="title" onMouseEnter={() => console.log("mouse enter")} onClick={()=>console.log("im clicked")}> Hello I'm a title</h3>)
}
*/
const Button = () =>(<button style={{backgroundColor:"tomato"}}> click me</button>)
const Container = () => <div>
<Title /> <Button />
</div>
ReactDOM.render(<Container />,root);
</script>
</html>