ReactJS element are immutable, it means you don’t have any way to update any part of these element. You need to render the entire element again if you want to update any part of it. But, in reality, the entire DOM is not updated in browser and reactjs just update the part of actual DOM.
<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<head>
<meta charset="UTF-8">
<title>React Demo</title>
</head>
<body>
<div id="react-space" style="border: 10px solid #cccccc">
<h1>Current Count : 0</h1>
</div>
<button onclick="updateState()">Update</button>
<script type="text/babel">
let count = 0;
function updateState() {
count = count + 1;
const element = (
<h1>Current Count : {count}</h1>
);
ReactDOM.render(
element,
document.getElementById("react-space")
);
}
</script>
</body>
</html>
