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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Pendahuluan",
  "children": [{
    "depth": 2,
    "value": "Mencoba Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Belajar Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Berpikir dengan cara Solid",
    "children": [{
      "depth": 3,
      "value": "1. Data yang Deklaratif",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Komponen yang Hilang",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Pemisahan Membaca/Menulis",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Sederhana lebih baik daripada mudah",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Me-render di Server",
    "children": []
  }, {
    "depth": 2,
    "value": "Tanpa Kompilasi?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h2: "h2",
    p: "p",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "pendahuluan",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pendahuluan",
        children: "#"
      }), "Pendahuluan"]
    }), "\n", jsxs(_components.h2, {
      id: "mencoba-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#mencoba-solid",
        children: "#"
      }), "Mencoba Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["Sejauh ini cara termudah untuk mulai menggunakan Solid adalah dengan mencobanya secara online. REPL kami di ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " adalah cara terbaik untuk mencoba ide-ide kamu. Sama halnya dengan ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " dimana kamu dapat mengubah semua contoh yang kami sediakan."]
    }), "\n", jsxs(_components.p, {
      children: ["Atau, kamu juga dapat menggunakan template-template ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "Vite"
      }), " sederhana kami dengan menjalankan perintah-perintah dibawah ini pada terminal kamu:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Atau untuk pengguna TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid-ts\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "belajar-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#belajar-solid",
        children: "#"
      }), "Belajar Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid pada dasarnya adalah bagian-bagian kecil yang dapat di komposisikan sehingga kamu dapat menggunakannnya sebagai blok-blok bangunan untuk membuat sebuahaplikasi. Bagian-bagian ini pada umumnya terdiri dari fungsi-fungsi yang terbuat dari API tingkat-atas yang dangkal. Untungnya, kamu tidak perlu tahu tentang semua hal itu untuk memulai."
    }), "\n", jsx(_components.p, {
      children: "Dua tipe utama dari blok-blok bangunan yang kamu punya adalah Komponen dan Primitif-Primitif Reaktif."
    }), "\n", jsx(_components.p, {
      children: "Komponen adalah fungsi yang dapat menerima properti objek dan mengembalikan elemen JSX termasuk elemen DOM asli dan komponen lainnya. Mereka dapat di ekspresikan sebagai elemen JSX dalam bentuk PascalCase:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", 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"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Komponen itu ringan karena mereka tidak stateful dan tidak memiliki instance. Sebaliknya, mereka berfungsi sebagai factory functions untuk element DOM dan Primitif-Primitif Reaktif."
    }), "\n", jsx(_components.p, {
      children: "Reaktivitas halus dari Solid dibangun di atas 3 primitif sederhana: Signals, Memo, dan Effects. Bersama-sama, mereka membentuk mesin pelacakan sinkronisasi otomatis yang memastikan tampilan kamu tetap terbarui. Komputasi-komputasi reaktif mengambil bentuk sebagai ekspresi-ekspresi yang terbungkus fungsi yang dieksekusi secara bersamaan."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Kamu dapat mempelajari lebih dalam tentang ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Reaktifitas pada Solid"
      }), " dan ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Rendering pada Solid"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "berpikir-dengan-cara-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#berpikir-dengan-cara-solid",
        children: "#"
      }), "Berpikir dengan cara Solid"]
    }), "\n", jsx(_components.p, {
      children: "Desain Solid mengambil beberapa pendapat tentang prinsip dan nilai yang dapat membantu kita membuat website dan aplikasi yang terbaik. Akan lebih mudah untuk mempelajari dan menggunakan Solid ketika kamu paham tentang filosofi dibaliknya."
    }), "\n", jsxs(_components.h3, {
      id: "1-data-yang-deklaratif",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-data-yang-deklaratif",
        children: "#"
      }), "1. Data yang Deklaratif"]
    }), "\n", jsx(_components.p, {
      children: "Data yang deklaratif adalah praktik mengikat deskripsi dari sebuah perilaku data ke deklarasinya. Ini memungkinkan untuk komposisi yang mudah dengan mengemas semua aspek perilaku dari data tersebut pada satu tempat."
    }), "\n", jsxs(_components.h3, {
      id: "2-komponen-yang-hilang",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-komponen-yang-hilang",
        children: "#"
      }), "2. Komponen yang Hilang"]
    }), "\n", jsx(_components.p, {
      children: "Sudah cukup sulit untuk menyusun komponen-komponen kamu tanpa perlu mempertimbangkan pembaruan. Pembaruan di Solid betul-betul tidak bergantung terhadap komponen. Fungsi komponen hanya dipanggil satu kali saja lalu tidak ada lagi. Komponen-komponen ada hanya untuk mengatur kode kamu dan sedikit hal lainnya."
    }), "\n", jsxs(_components.h3, {
      id: "3-pemisahan-membacamenulis",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-pemisahan-membacamenulis",
        children: "#"
      }), "3. Pemisahan Membaca/Menulis"]
    }), "\n", jsx(_components.p, {
      children: "Kontrol yang presisi dan dapat diprediksi membuat sistem menjadi lebih baik. Kita tidak membutuhkan immutability yang sesungguhnya untuk memaksakan unidirectional flow, kita hanya perlu kemampuan untuk membuat keputusan sadar, yang mana yang mungkin ditulis dan yang mana yang tidak, oleh kostumer."
    }), "\n", jsxs(_components.h3, {
      id: "4-sederhana-lebih-baik-daripada-mudah",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-sederhana-lebih-baik-daripada-mudah",
        children: "#"
      }), "4. Sederhana lebih baik daripada mudah"]
    }), "\n", jsx(_components.p, {
      children: "Sebuah pelajaran yang dapat diambil dari Reaktifitas halus (fine-grained). Konvensi yang eksplisit dan konsisten bahkan jika membutuhkan lebih banyak usaha tidak akan sia-sia. Karena tujuannya adalah menyediakan alat-alat minimal sebagai dasar/pondasi untuk membangun."
    }), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid lahir dengan keinginan untuk membuat Web Components sebagai \"first class citizens\". Seiring waktu, desain dari solid berkembang dan tujuannya pun berganti. Tetapi, Solid tetap menjadi pilihan yang cocok untuk pengguna Web Components. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " membolehkan kamu untuk menulis dan membungkus fungsi komponen Solid untuk menghasilkan Web Components yang kecil dan mempunyai performa baik. Didalam aplikasi Solid, Solid Element tetap dapat memanfaatkan Context API dari Solid, dan dukungan Shadow DOM isolated styling dari Solid Portals."]
    }), "\n", jsxs(_components.h2, {
      id: "me-render-di-server",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#me-render-di-server",
        children: "#"
      }), "Me-render di Server"]
    }), "\n", jsx(_components.p, {
      children: "Solid memiliki solusi untuk melakukan render di server yang dynamic yang memungkinkan kamu mendapatkan pengalaman isomorphic development yang sesungguhnya. Melalui penggunaan Resource Primitif kami, async data requests dapat dengan mudah dibuat dan yang lebih penting, secara otomatis diserialisasi dan disingkronkan antara klien dan browser."
    }), "\n", jsxs(_components.p, {
      children: ["Karena Solid mendukung rendering secara asinkron dan streaming di server, kamu dapat menulis kode kamu dengan satu cara dan membuatnya dapat dieksekusi di server. Yang berarti fitur seperti ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " dan pemecahan kode dapat bekerja begitu saja di Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Untuk informasi lebih lanjut, silahkan baca ", jsx(_components.a, {
        href: "#rendering-di-server",
        children: "Panduan Server"
      })]
    }), "\n", jsxs(_components.h2, {
      id: "tanpa-kompilasi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#tanpa-kompilasi",
        children: "#"
      }), "Tanpa Kompilasi?"]
    }), "\n", jsx(_components.p, {
      children: "Membenci JSX? Tidak keberatan melakukan pekerjaan manual untuk membungkus ekspresi-ekspresi, kinerja yang lebih buruk, dan ukuran bundel yang lebih besar? Secara alternatif, kamu dapat membuat aplikasi Solid menggunakan Tagged Template Literals atau HyperScript di lingkungan tanpa kompilasi."
    }), "\n", jsxs(_components.p, {
      children: ["Kamu dapat menjalankan langsung dari browser menggunakan ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", 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          timer = ", 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        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Ingat kamu tetap harus memerlukan library DOM Expressions yang sesuai untuk membuat mereka bekerja dengan TypeScript. Kamu dapat menggunakan Tagged Template Literals dengan ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " atau HyperScript dengan ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), "."]
    })]
  });
}
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=getting-started-c22ccd93.js.map
