import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    a: "a",
    blockquote: "blockquote"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.em, {
        children: "Signals"
      }), " adalah fondasi reaktivitas Solid. Mereka terdapat nilai yang dapat berubah seiiring waktu; ketika kamu mengubah nilai sebuah signal, otomatis akan memperbarui apapun yang menggunakannya."]
    }), "\n", jsxs(_components.p, {
      children: ["Untuk membuat sebuah signal, cobalah import ", jsx(_components.code, {
        children: "createSignal"
      }), " dari ", jsx(_components.code, {
        children: "solid-js"
      }), " dan memamnggilnya dari komponen Counter kita seperti ini:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Argumen diberikan ke inisiator adalah nilai inisial (awal), dan akan mengembalikan nilai berupa array dengan dua fungsi, sebuah getter (pengambil) dan setter (penyetel/pengatur). Dengan ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
        children: "destructuring"
      }), ", kita bisa menamakan kedua fungsi ini apapun yang kita mau, kita bisa menamakan getternya ", jsx(_components.code, {
        children: "count"
      }), " dan setternya ", jsx(_components.code, {
        children: "setCount"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Ini penting untuk diperhatikan bahwa value pertama yang dikembalikan adalah sebuah getter (sebuah fungsi pengembali value saat ini) dan bukanlah value itu sendiri. Ini dikarenakan framework butuh melacak dimana saja signal dibaca dan karena itu bisa diperbarui dengan nilai yang sesuai."
    }), "\n", jsxs(_components.p, {
      children: ["Di dalam materi ini, kita akan menggunakan fungsi ", jsx(_components.code, {
        children: "setInterval"
      }), " JavaScript untuk membuat sebuah penghitung yang secara periodik bertambah.Kita bisa memperbarui signal ", jsx(_components.code, {
        children: "count"
      }), " kita setiap detik dengan menambahkan kode ini ke komponen Counter kita:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Setiap detik, kita membaca hitungan yang sebelumnya, menambahkannya dengan satu, dan menetapkan nilai yang baru."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Signal Solid juga menerima sebuah bentuk fungsi dimana kamu bisa menggunakan nilai sebelumnya untuk menetapkan nilai yang baru"
      }), "\n", jsx(_components.pre, {
        children: jsxs(_components.code, {
          className: "hljs language-jsx",
          children: [jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsxs(_components.span, {
            className: "hljs-function",
            children: ["(", jsx(_components.span, {
              className: "hljs-params",
              children: "c"
            }), ") =>"]
          }), " c + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), ");\n"]
        })
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Akhirnya, kita membaca signal kedalam kode JSX kita:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Count: {count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-6d73998b.js.map
