Alpine, JQuery, Vue, React comparison

.gitignore

.DS_Store

README.md

Reactive input element usage in JS libraries (without <script> import)

alpine

<div x-data="{msg:''}">
  <input x-model="msg" />
  <span x-text="msg"></span>
</div>

angular1

<div ng-app>
  <input ng-model="msg" />
  <span>{{msg}}</span>
</div>

jquery

<input id="msg" />
<span></span>

<script>
  $("#msg").keypress(function (e) {
    $("span").text(e.target.value);
  });
</script>

react

<script type="text/babel">
  function App() {
    const [msg, setMsg] = React.useState("");
    return (
      <>
        <input onChange={({ target: { value } }) => setMsg(value)} />
        <span>{msg}</span>
      </>
    );
  }
  ReactDOM.render(<App />, document.querySelector("#msg"));
</script>

<div id="msg"></div>

vanilla

<input id="msg" />
<span></span>

<script>
  document.getElementById("msg").onkeypress = function (e) {
    document.querySelector("span").innerHTML = e.target.value;
  };
</script>

vue

<div id="app">
  <input v-model="msg" />
  <span>{{ msg }}</span>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      msg: "",
    },
  });
</script>

_screenshot.gif

_screenshot2.png

alpine

angular1

bash.sh

jquery

react

vanilla

vue