Why you should give Svelte a try

create-fragment-function.js

function create_fragment(ctx) {
  var button, t1, p, t2, t3, t4, t5, t6_value = ctx.count1 + ctx.count2, t6, dispose;

  return {
    c: function create() {
      button = element("button");
      button.textContent = "Click";
      t1 = space();
      p = element("p");
      t2 = text(ctx.count1);
      t3 = text(" + ");
      t4 = text(ctx.count2);
      t5 = text(" = ");
      t6 = text(t6_value);
      dispose = listen(button, "click", ctx.handleClick);
    },

    m: function mount(target, anchor) {
      insert(target, button, anchor);
      insert(target, t1, anchor);
      insert(target, p, anchor);
      append(p, t2);
      append(p, t3);
      append(p, t4);
      append(p, t5);
      append(p, t6);
    },

    p: function update(changed, ctx) {
      if (changed.count1) {
        set_data(t2, ctx.count1);
      }

      if (changed.count2) {
        set_data(t4, ctx.count2);
      }

      if (
        (changed.count1 || changed.count2) &&
        t6_value !== (t6_value = ctx.count1 + ctx.count2)
      ) {
        set_data(t6, t6_value);
      }
    },

    i: noop,
    o: noop,

    d: function destroy(detaching) {
      if (detaching) {
        detach(button);
        detach(t1);
        detach(p);
      }

      dispose();
    }
  };
}

example1.jsx

import React, { useState } from 'react'

export default function() {
 const [count1, setCount1] = useState(0);
 const [count2, setCount2] = useState(10);

 function handleClick() {
   setCount1(count1 + 1);
   setCount2(count2 - 1);
 }

 return (
   <>
     <button onClick={handleClick}>
       Click
     </button>

     <p>
       { count1 } + { count2 } = { count1 + count2 }
     </p>
   </>
 )
}

example1.svelte

<script>
  let count1 = 0
  let count2 = 10

  function handleClick() {
    count1 += 1
    count2 -= 1
  }
</script>

<button on:click={handleClick}>
  Click
</button>

<p>
  {count1} + {count2} = {count1 + count2}
</p>

instance-function.js

function instance($$self, $$props, $$invalidate) {
  let count1 = 0
  let count2 = 10

  function handleClick() {
    $$invalidate('count1', count1 += 1)
    $$invalidate('count2', count2 -= 1)
  }

  return { count1, count2, handleClick };
}

state-in-react.js

// Update state using classes
const { count } = this.state
this.setState({
  count: count + 1
})

// Update state using hooks
const [count, setCount] = useState(0)
setCount(count + 1)

state-in-svelte.js

count += 1; $$invalidate('count', count)

state-in-vue.js

export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    onclick () {
      // Update state
      this.count += 1
    }
  }
}

svelte-compiled-component.js

class App extends SvelteComponentDev {
  constructor(options) {
    super(options);
    init(this, options, instance, create_fragment, safe_not_equal, []);
  }
}