​​Reactivity in Web Frameworks

​​What is Reactivity?

​​Reactivity is the ability of a web framework to update your view whenever the application state has changed.
​​
​​It is the core of any modern web framework.
​​
​​To understand what reactivity is, let’s look at an example counter app.
​​
​​This is how you would write in plain JavaScript:
​​const root = document.getElementById("app");
​​root.innerHTML = `
​​  <button>-</button>
​​  <span>0</span>
​​  <button>+</button>
​​`;
​​
​​const [decrementBtn, incrementBtn] = root.querySelectorAll("button");
​​const span = root.querySelector("span");
​​let count = 0;
​​decrementBtn.addEventListener("click", () => {
​​  count--;
​​  span.innerText = count;
​​});
​​incrementBtn.addEventListener("click", () => {
​​  count++;
​​  span.innerText = count;
​​});
​​
​​This is how you would do it in Vue:
​​<template>
​​  <div>
​​    <button v-on:click="counter -= 1">-</button>
​​    <span>{{ counter }}</span>
​​    <button v-on:click="counter += 1">+</button>
​​  </div>
​​</template>
​​
​​<script>
​​export default {
​​  data() {
​​    return {
​​      counter: 0
​​    };
​​  }
​​};
​​</script>
​​
​​… and this in React:
​​function App() {
​​  const [counter, setCounter] = React.useState(0);