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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Pengantar",
  "children": []
}, {
  "depth": 1,
  "value": "Apa itu Solid?",
  "children": []
}, {
  "depth": 1,
  "value": "Anatomi dari Aplikasi Solid",
  "children": []
}, {
  "depth": 1,
  "value": "Memanfaatkan Tutorial Ini",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "pengantar",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pengantar",
        children: "#"
      }), "Pengantar"]
    }), "\n", jsx(_components.p, {
      children: "Selamat datang ke tutorial Solid! Dalam tutorial ini kami akan mengantarkan kamu ke fitur utama Solid. Kamu juga bisa merujuk ke API dan panduan-panduan untuk mengatahui lebih lanjut bagaimana Solid bekerja."
    }), "\n", jsxs(_components.h1, {
      id: "apa-itu-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#apa-itu-solid",
        children: "#"
      }), "Apa itu Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid adalah Kerangka Kerja (Framework) JavaScript untuk membuat aplikasi web yang interaktif.\nDengan Solid, kamu bisa menggunakan HTML yang ada dan Ilmu JavaScript untuk membuat komponen-komponen yang bisa digunakan berulang kali (reusable) di seluruh aplikasi kamu.\nSolid menyediakan alat-alat untuk meningkatkan komponen-komponen kamu dengan ", jsx(_components.em, {
        children: "reaktivitas"
      }), ": Kode deklaratif JavaScript yang menghubungkan user interface dengan data yang dibuat dan digunakan."]
    }), "\n", jsxs(_components.h1, {
      id: "anatomi-dari-aplikasi-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#anatomi-dari-aplikasi-solid",
        children: "#"
      }), "Anatomi dari Aplikasi Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["Sebuah aplikasi solid di bungkus dengan fungsi yang kita panggil \"komponen\". Coba lihatlah fungsi ", jsx(_components.code, {
        children: "HelloWorld"
      }), " di sebelah kananmu! fungsi itu langsung mengembalikan sebuah ", jsx(_components.code, {
        children: "div"
      }), "! Ini adalah campuran HTML dan JavaScript yang disebut JSX. Solid memiliki compiler yang mengubah tags ini ke DOM nodes setelahnya."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX memperbolehkan kamu untuk menggunakan kebanyakan elemen HTML ke dalam aplikasi kita, tapi karena itu juga membuat kamu dapat membuat elemen baru. Setelah kita mendeklarasikan fungsi ", jsx(_components.code, {
        children: "HelloWorld"
      }), ", kita bisa menggunakannya sebagai tag ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), " di dalam aplikasi kita."]
    }), "\n", jsxs(_components.p, {
      children: ["Pintu masuk (entry point) untuk Aplikasi Solid apapun adalah fungsi ", jsx(_components.code, {
        children: "render"
      }), ". Fungsi ini membutuhkan 2 Argumen, sebuah fungsi yang membungkus kode aplikasi kita dan sebuah elemen HTML yang sudah ada di HTML yang ingin kita pasang:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HelloWorld"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"app\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h1, {
      id: "memanfaatkan-tutorial-ini",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#memanfaatkan-tutorial-ini",
        children: "#"
      }), "Memanfaatkan Tutorial Ini"]
    }), "\n", jsx(_components.p, {
      children: "Setiap materi di sebuah tutorial menjelaskan fitur Solid dan sebuah skenario untuk di coba langsung. Kapan saja kamu bisa menekan tombol selesaikan atau atur ulang untuk memulai dari awal. Code editor itu sendiri memiliki console dan tab keluaran dimana kamu bisa melihat hasil compile yang dihasilkan dari kode kamu. Lihatlah jika kamu penasaran bagaimana Solid menghasilkan sebuah kode."
    }), "\n", jsx(_components.p, {
      children: "Bersenang-senanglah!"
    })]
  });
}
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-cdc30e78.js.map
