10 replies

Purpose of "reactivity" in JS frameworks

Hello, can someone explain what is the purpose of "reactivity" in frameworks like vue or react pls.

For e.g, consider this piece of code:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>

This is reactive in the sense that count is getting updated on the UI, no?

KP-C

Kevin Powell - Community•6mo ago•

10 replies

Faker

Purpose of "reactivity" in JS frameworks

Hello, can someone explain what is the purpose of "reactivity" in frameworks like vue or react pls.

For e.g, consider this piece of code:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>

This is reactive in the sense that count is getting updated on the UI, no?

Purpose of "reactivity" in JS frameworks

Similar Threads

Purpose of "reactivity" in JS frameworks

Similar Threads

Similar Threads

Similar Threads